react/forward-ref-uses-ref
Require a component wrapped in `forwardRef` to take a `ref` parameter
forwardRef passes the parent's ref to your component as a second parameter. A component that only takes props drops it, so the parent's ref.current is never set. Either the ref parameter is missing or you don't need the wrapper.
The rule reports a function with exactly one parameter. Your editor offers two suggestions: add a ref parameter, or remove the forwardRef wrapper.
Configure#
Off by default. To turn it on:
bunfig.toml
[lint.rules]
"react/forward-ref-uses-ref" = "error" # or "warn"Examples#
Reported:
import { forwardRef } from "react";
const TextInput = forwardRef(props => {
return <input type="text" value={props.value} />;
});Not reported:
import { forwardRef } from "react";
const TextInput = forwardRef((props, ref) => {
return <input type="text" value={props.value} ref={ref} />;
});
const Label = props => <label>{props.text}</label>;