no-forward-ref
Full Name in eslint-plugin-react-x
react-x/no-forward-refFull Name in @eslint-react/eslint-plugin
@eslint-react/no-forward-refFeatures
🔍 🔄
Presets
corerecommendedrecommended-typescriptrecommended-type-checked
What it does
Disallows using React.forwardRef.
In React 19, forwardRef is no longer necessary. Pass ref as a prop instead.
forwardRef will deprecated in a future release. Learn more here.
An unsafe codemod is available for this rule.
Examples
Failing
import { 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)} />;
});Passing
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> }) {
return <input ref={ref} value={value} onChange={(e) => onChange(e.target.value)} />;
}