src/content/docs/linter/rules/no-react-forward-ref.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v2.2.5` - Diagnostic Category: [`lint/suspicious/noReactForwardRef`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - This rule belongs to the following domains: - [`react`](/linter/domains#react) - Sources: - Same as [`react-x/no-forward-ref`](https://eslint-react.xyz/docs/rules/no-forward-ref) - Same as [`@eslint-react/no-forward-ref`](https://eslint-react.xyz/docs/rules/no-forward-ref){
"linter": {
"rules": {
"suspicious": {
"noReactForwardRef": "error"
}
}
}
}
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.
import { forwardRef } from "react";
const MyInput = forwardRef(function MyInput(props, ref) {
return <input ref={ref} {...props} />;
});
import { forwardRef } from "react";
const MyInput = forwardRef((props, ref) => {
return <input ref={ref} {...props} />;
});
function MyInput({ ref, ...props }) {
return <input ref={ref} {...props} />;
}
const MyInput = ({ ref, ...props }) => {
return <input ref={ref} {...props} />;
}