noReactForwardRef
Цей контент ще не доступний вашою мовою.
Summary
Section titled “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:
- Sources:
- Same as
react-x/no-forward-ref
- Same as
@eslint-react/no-forward-ref
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "noReactForwardRef": "error" } } }}
Description
Section titled “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
Section titled “Examples”Invalid
Section titled “Invalid”import { forwardRef } from "react";
const MyInput = forwardRef(function MyInput(props, ref) { return <input ref={ref} {...props} />;});
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 │
import { forwardRef } from "react";
const MyInput = forwardRef((props, ref) => { return <input ref={ref} {...props} />;});
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 │
function MyInput({ ref, ...props }) { return <input ref={ref} {...props} />;}
const MyInput = ({ ref, ...props }) => { return <input ref={ref} {...props} />;}
Related links
Section titled “Related links”Copyright (c) 2023-present Biome Developers and Contributors.