no-create-ref

Full Name in eslint-plugin-react-x

react-x/no-create-ref

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-create-ref

Presets

core
recommended
recommended-typescript
recommended-type-checked

Description

Disallow createRef in function components.

createRef() is a legacy API that is not recommended for use in new code. Instead, prefer using useRef() with function components.

Examples

Failing

import React, { createRef } from "react";
 
function MyComponent() {
  const ref = React.createRef<HTMLDivElement>();
  //          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  //          - [Deprecated] Use 'useRef' instead.
 
  return <div ref={ref} />;
}

Passing

import React, { useRef } from "react";
 
function MyComponent() {
  const ref = useRef<HTMLDivElement>(null);
 
  return <div ref={ref} />;
}

import React, { createRef } from "react";
 
class MyComponent extends React.Component {
  inputRef = createRef();
  // ...
}

Description

Examples

Failing

Passing

Implementation

Further Reading

See Also

On this page