Rules
no-useless-forward-ref
Full Name in eslint-plugin-react-x
react-x/no-useless-forward-ref
Full Name in @eslint-react/eslint-plugin
@eslint-react/no-useless-forward-ref
Presets
x
recommended
recommended-typescript
recommended-type-checked
Description
Disallow useless forwardRef
calls on components that don't use ref
s.
This rule enforces that:
- Components using
forwardRef
must declare aref
parameter - Components not using
ref
should not be wrapped withforwardRef
Examples
Failing
import React from "react";
const MyComponent = React.forwardRef((props) => {
// ^^^^^
// - 'forwardRef' wrapper is useless without 'ref' parameter.
return <button />;
});
Passing
import React from "react";
const MyComponent = React.forwardRef<HTMLButtonElement>((props, ref) => {
return <button ref={ref} />;
});
Implementation
Further Reading
See Also
no-forward-ref
Replaces usages offorwardRef
with passingref
as a prop.