ensure-forward-ref-using-ref

Rule category

Correctness.

What it does

Requires that components wrapped with forwardRef must have a ref parameter.

This rule checks all React components using forwardRef and verifies that there is a second parameter.

Why is this bad?

Omitting the ref argument is usually a bug, and components not using ref don’t need to be wrapped by forwardRef.

Examples

Failing

import React from "react";
 
const const Example: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>Example = React.function React.forwardRef<unknown, {}>(render: React.ForwardRefRenderFunction<unknown, {}>): React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<unknown>>Lets your component expose a DOM node to a parent component
using a ref.
@see{@link https://react.dev/reference/react/forwardRef React Docs}@see{@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}@paramrender See the {@link ForwardRefRenderFunction}.@templateT The type of the DOM node.@templateP The props the component accepts, if any.@example```tsx
interface Props {
  children?: ReactNode;
  type: "submit" | "button";
}

export const FancyButton = forwardRef<HTMLButtonElement, Props>((props, ref) => (
  <button ref={ref} className="MyClassName" type={props.type}>
    {props.children}
  </button>
));
```forwardRef((props: {}props) => {
  //                             - 'forwardRef' is used with this component but no 'ref' parameter is set.
  return <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />;
});

Passing

import React from "react";
 
const const Example: React.ForwardRefExoticComponent<React.RefAttributes<HTMLButtonElement>>Example = React.function React.forwardRef<HTMLButtonElement, {}>(render: React.ForwardRefRenderFunction<HTMLButtonElement, {}>): React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<HTMLButtonElement>>Lets your component expose a DOM node to a parent component
using a ref.
@see{@link https://react.dev/reference/react/forwardRef React Docs}@see{@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}@paramrender See the {@link ForwardRefRenderFunction}.@templateT The type of the DOM node.@templateP The props the component accepts, if any.@example```tsx
interface Props {
  children?: ReactNode;
  type: "submit" | "button";
}

export const FancyButton = forwardRef<HTMLButtonElement, Props>((props, ref) => (
  <button ref={ref} className="MyClassName" type={props.type}>
    {props.children}
  </button>
));
```forwardRef<HTMLButtonElement>((props: {}props, ref: React.ForwardedRef<HTMLButtonElement>ref) => {
  return <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button React.RefAttributes<HTMLButtonElement>.ref?: React.LegacyRef<HTMLButtonElement> | 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={ref: React.ForwardedRef<HTMLButtonElement>ref} />;
});