This React warning appears when a forwardRef render function does not accept both props and ref as parameters. React requires forwardRef components to explicitly accept both parameters, even if the ref is not used.
This warning is React's way of enforcing the correct function signature for forwardRef components. When you wrap a component with React.forwardRef(), React expects the render function to accept exactly two parameters: props (first) and ref (second). React validates this at runtime and issues a warning if the function signature doesn't match. This happens because React internally calls your render function with these two arguments, and having a different signature can lead to unexpected behavior or bugs where the ref isn't properly forwarded. The warning typically appears in the browser console during development and helps catch a common mistake where developers forget to include the ref parameter in their function signature, even if they don't plan to use it immediately.
Update your forwardRef render function to accept both props and ref parameters:
Before (incorrect):
const MyInput = forwardRef(function MyInput(props) {
return <input className={props.className} />;
});After (correct):
const MyInput = forwardRef(function MyInput(props, ref) {
return <input ref={ref} className={props.className} />;
});Even if you don't immediately use the ref, you must include it in the function signature to satisfy React's validation.
If you're destructuring props, make sure to include ref as a separate parameter:
Before (incorrect):
const Button = forwardRef(function Button({ label, onClick }) {
return <button onClick={onClick}>{label}</button>;
});After (correct):
const Button = forwardRef(function Button({ label, onClick }, ref) {
return <button ref={ref} onClick={onClick}>{label}</button>;
});The ref must always be the second parameter, separate from the props object.
Arrow functions also need both parameters:
Before (incorrect):
const TextArea = forwardRef((props) => {
return <textarea value={props.value} />;
});After (correct):
const TextArea = forwardRef((props, ref) => {
return <textarea ref={ref} value={props.value} />;
});Once you've added the ref parameter, make sure to actually use it by attaching it to a DOM element or forwarding it to another component:
const MyInput = forwardRef(function MyInput(props, ref) {
// Attach ref to the input element
return <input ref={ref} {...props} />;
});
// Or forward to a child component
const Wrapper = forwardRef(function Wrapper(props, ref) {
return <MyInput ref={ref} {...props} />;
});If you don't need to forward the ref, consider removing forwardRef entirely.
TypeScript typing:
When using TypeScript, properly type both parameters:
import { forwardRef, InputHTMLAttributes } from 'react';
interface MyInputProps extends InputHTMLAttributes<HTMLInputElement> {
label?: string;
}
const MyInput = forwardRef<HTMLInputElement, MyInputProps>(
function MyInput(props, ref) {
return <input ref={ref} {...props} />;
}
);React 19 deprecation:
In React 19, forwardRef is no longer necessary. You can pass ref as a regular prop:
// React 19+
function MyInput({ ref, ...props }) {
return <input ref={ref} {...props} />;
}When you don't need the ref:
If your component doesn't actually need to forward a ref, consider removing forwardRef entirely rather than keeping an unused ref parameter. Only use forwardRef when you actually need to expose a DOM node or imperative handle to parent components.
Using with useImperativeHandle:
forwardRef is commonly paired with useImperativeHandle to expose custom ref values:
const MyInput = forwardRef(function MyInput(props, ref) {
const inputRef = useRef(null);
useImperativeHandle(ref, () => ({
focus() {
inputRef.current?.focus();
},
clear() {
inputRef.current.value = '';
}
}));
return <input ref={inputRef} {...props} />;
});React.FC expects children prop to be defined
React.FC no longer includes implicit children prop
Warning: You provided a `selected` prop to a form field without an `onChange` handler
You provided a 'selected' prop without an onChange handler
Failed to load source map from suspense chunk
How to fix "Failed to load source map from suspense chunk" in React
Prop spreading could cause security issues
Prop spreading could cause security issues
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency