Rules
no-forward-ref
Full Name in eslint-plugin-react-x
react-x/no-forward-ref
Full Name in @eslint-react/eslint-plugin
@eslint-react/no-forward-ref
Features
🔄
Presets
x
recommended
recommended-typescript
recommended-type-checked
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.
forwardRef
will deprecated in a future release. Learn more here.
Examples
Before
import React, { forwardRef } from "react";
const MyInput = forwardRef(function MyInput(props, ref) {
return <input ref={ref} {...props} />;
});
import React from "react";
interface MyInputProps {
value: string;
onChange: (value: string) => void;
}
const MyInput = React.forwardRef<MyInputProps, HTMLInputElement>(
function MyInput({ value, onChange }, ref) {
return (
<input
ref={ref}
value={value}
onChange={(e) => onChange(e.target.value)}
/>
);
},
);
After
import React from "react";
function MyInput({ ref, ...props }) {
return <input ref={ref} {...props} />;
}
import React from "react";
interface MyInputProps {
value: string;
onChange: (value: string) => void;
}
function MyInput({
ref,
value,
onChange,
}: MyInputProps & { ref?: React.RefObject<HTMLInputElement> | null }) {
return <input ref={ref} value={value} onChange={(e) => onChange(e.target.value)} />;
}
Implementation
Further Reading
See Also
no-useless-forward-ref
Enforces thatforwardRef
is only used when aref
parameter is declared.no-context-provider
Replaces usages of<Context.Provider>
with<Context>
.no-use-context
Replaces usages ofuseContext
withuse
.