noReactForwardRef

Esta página aún no está disponible en tu idioma.

JavaScript (and super languages)

Summary

Rule available since: v2.2.5
Diagnostic Category: lint/nursery/noReactForwardRef
This rule has an unsafe fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- react
Sources:
- Same as react-x/no-forward-ref
- Same as @eslint-react/no-forward-ref

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noReactForwardRef": "error"
6
      }
7
    }
8
  }
9
}

Description

Replaces usages of forwardRef with passing ref as a prop.

In React 19, forwardRef is no longer necessary. Pass ref as a prop instead. This rule detects the usage of the forwardRef API, and it suggests using the prop ref instead. See the official blog post for details.

This rule should be disabled if you are working with React 18 or earlier.

Examples

Invalid

1
import { forwardRef } from "react";
2

3
const MyInput = forwardRef(function MyInput(props, ref) {
4
  return <input ref={ref} {...props} />;
5
});

code-block.jsx:3:17 lint/nursery/noReactForwardRef  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Use of forwardRef is detected, which is deprecated.
  
    1 │ import { forwardRef } from “react”;
    2 │ 
  > 3 │ const MyInput = forwardRef(function MyInput(props, ref) {
      │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 4 │   return <input ref={ref} {…props} />;
  > 5 │ });
      │ ^^
    6 │ 
  
  ℹ In React 19, ‘forwardRef’ is no longer necessary. Pass ‘ref’ as a prop instead.
  
  ℹ Replace the use of forwardRef with passing ref as a prop.
  
  ℹ Unsafe fix: Remove the forwardRef() call and receive the ref as a prop.
  
    1 1 │   import { forwardRef } from “react”;
    2 2 │   
    3   │ - const·MyInput·=·forwardRef(function·MyInput(props,·ref)·{
      3 │ + const·MyInput·=·function·MyInput({·ref,·...props·})·{
    4 4 │     return <input ref={ref} {…props} />;
    5   │ - });
      5 │ + };
    6 6 │

1
import { forwardRef } from "react";
2

3
const MyInput = forwardRef((props, ref) => {
4
  return <input ref={ref} {...props} />;
5
});

code-block.jsx:3:17 lint/nursery/noReactForwardRef  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Use of forwardRef is detected, which is deprecated.
  
    1 │ import { forwardRef } from “react”;
    2 │ 
  > 3 │ const MyInput = forwardRef((props, ref) => {
      │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 4 │   return <input ref={ref} {…props} />;
  > 5 │ });
      │ ^^
    6 │ 
  
  ℹ In React 19, ‘forwardRef’ is no longer necessary. Pass ‘ref’ as a prop instead.
  
  ℹ Replace the use of forwardRef with passing ref as a prop.
  
  ℹ Unsafe fix: Remove the forwardRef() call and receive the ref as a prop.
  
    1 1 │   import { forwardRef } from “react”;
    2 2 │   
    3   │ - const·MyInput·=·forwardRef((props,·ref)·=>·{
      3 │ + const·MyInput·=·({·ref,·...props·})·=>·{
    4 4 │     return <input ref={ref} {…props} />;
    5   │ - });
      5 │ + };
    6 6 │

Valid

1
function MyInput({ ref, ...props }) {
2
  return <input ref={ref} {...props} />;
3
}

1
const MyInput = ({ ref, ...props }) => {
2
  return <input ref={ref} {...props} />;
3
}