no-create-ref

react-x/no-create-ref

@eslint-react/no-create-ref

import React, { createRef } from "react";

// Problem: Using createRef in a function component
function MyComponent() {
  const ref = React.createRef<HTMLDivElement>();
  //          ^^^ [Deprecated] Use 'useRef' instead.

  return <div ref={ref} />;
}

import React, { useRef } from "react";

// Recommended: Use useRef in function components
function MyComponent() {
  const ref = useRef<HTMLDivElement>(null);

  return <div ref={ref} />;
}

import React, { createRef } from "react";

// OK: Using createRef in a class component is the intended use
class MyComponent extends React.Component {
  inputRef = createRef();
  // ...
}

// Problem: createRef inside a function component creates a new ref on every render
import { createRef } from "react";

function Form() {
  const inputRef = createRef(); // Does not persist across renders

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}

// Recommended: useRef persists the same ref object across renders
import { useRef } from "react";

function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}