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

x recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

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

Common Violations

Invalid

import React, { createRef } from "react";

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

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

Valid

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();
  // ...
}

Resources

• Rule Source
• Test Source

Further Reading

• Legacy React APIs: createRef

See Also

• react-naming-convention/ref-name
  Enforces identifier names assigned from useRef calls to be either ref or end with Ref.
• react-x/no-forward-ref
  Replaces usage of forwardRef with passing ref as a prop.
• react-x/refs
  Validates correct usage of refs by checking that ref.current is not read or written during render.