no-create-ref

Rule category

Restriction.

What it does

Prevents usage of createRef() in function components.

Why is this bad?

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, { function createRef<T>(): React.RefObject<T>createRef } from "react";
 
function function Example(): React.JSX.ElementExample() {
  const const ref: React.RefObject<HTMLDivElement>ref = React.function React.createRef<HTMLDivElement>(): React.RefObject<HTMLDivElement>createRef<HTMLDivElement>();
  //          - 'createRef' is not allowed in function components. Use 'useRef' instead.
 
  return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.RefAttributes<HTMLDivElement>.ref?: React.LegacyRef<HTMLDivElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const ref: React.RefObject<HTMLDivElement>ref} />;
}

Passing

import React, { function useRef<T>(initialValue: T): React.MutableRefObject<T> (+2 overloads)`useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
(`initialValue`). The returned object will persist for the full lifetime of the component.

Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
value around similar to how you’d use instance fields in classes.
@version16.8.0@see{@link https://react.dev/reference/react/useRef}useRef } from "react";
 
function function Example(): React.JSX.ElementExample() {
  const const ref: React.RefObject<HTMLDivElement>ref = useRef<HTMLDivElement>(initialValue: HTMLDivElement | null): React.RefObject<HTMLDivElement> (+2 overloads)`useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
(`initialValue`). The returned object will persist for the full lifetime of the component.

Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
value around similar to how you’d use instance fields in classes.

Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type
of the generic argument.
@version16.8.0@see{@link https://react.dev/reference/react/useRef}useRef<HTMLDivElement>(null);
 
  return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.RefAttributes<HTMLDivElement>.ref?: React.LegacyRef<HTMLDivElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const ref: React.RefObject<HTMLDivElement>ref} />;
}

import React, { function createRef<T>(): React.RefObject<T>createRef } from "react";
 
class class ExampleExample extends React.class React.Component<P = {}, S = {}, SS = any>Component {
  Example.inputRef: React.RefObject<unknown>inputRef = createRef<unknown>(): React.RefObject<unknown>createRef();
  // ...
}