no-forward-ref
Replaces usage of 'forwardRef' with passing 'ref' as a prop.
Full Name in eslint-plugin-react-x
react-x/no-forward-refFull Name in @eslint-react/eslint-plugin
@eslint-react/no-forward-refFeatures
🔄
Presets
x
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
In React 19, forwardRef is no longer necessary. Pass ref as a prop instead.
forwardRef will be deprecated in a future release. Learn more here.
Examples
Wrapping function components with forwardRef
Starting from React 19, you can pass ref as a regular prop directly, without using forwardRef.
import React, { forwardRef } from "react";
// Problem: Using forwardRef to pass ref
const MyInput = forwardRef(function MyInput(props, ref) {
return <input ref={ref} {...props} />;
});// Recommended: Receive ref as a regular prop
function MyInput({ ref, ...props }) {
return <input ref={ref} {...props} />;
}Using typed React.forwardRef
Even with TypeScript generics, forwardRef can be replaced with a simpler props-based approach.
import React from "react";
interface MyInputProps {
value: string;
onChange: (value: string) => void;
}
// Problem: Using React.forwardRef with generic parameters
const MyInput = React.forwardRef<MyInputProps, HTMLInputElement>(
function MyInput({ value, onChange }, ref) {
return (
<input
ref={ref}
value={value}
onChange={(e) => onChange(e.target.value)}
/>
);
},
);import React from "react";
interface MyInputProps {
value: string;
onChange: (value: string) => void;
}
// Recommended: Declare ref directly in the props type
function MyInput({
ref,
value,
onChange,
}: MyInputProps & { ref?: React.RefObject<HTMLInputElement> | null }) {
return <input ref={ref} value={value} onChange={(e) => onChange(e.target.value)} />;
}