How to fix forwardRef render functions accept exactly two parameters: props and ref in React

ReactBEGINNERLOWUpdated Dec 9, 2025· 107 views

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.

Quick fix

Fixes forwardRef render functions accept exactly two parameters: props and ref

const MyInput = forwardRef(function MyInput(props) {
  return <input className={props.className} />;
});
  1. Add ref as the second parameter
  2. Fix destructured props syntax
  3. Update arrow function components
  4. Attach the ref to a DOM element or component
react — error
const MyInput = forwardRef(function MyInput(props) {
  return <input className={props.className} />;
});
forwardRef render functions accept exactly two parameters: props and ref

What this error means

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.

Typical symptoms

  • Warning message appears in browser console: "forwardRef render functions accept exactly two parameters: props and ref"
  • Component renders correctly but shows a warning
  • Ref forwarding may not work as expected
  • Warning appears when using components wrapped with forwardRef

Common causes

  1. Render function only accepts props parameter without including ref
  2. Function signature uses destructured props without a second ref parameter
  3. Arrow function omits the ref parameter entirely
  4. Component was converted to use forwardRef but function signature was not updated

How to fix "forwardRef render functions accept exactly two parameters: props and ref"

1Add ref as the second parameter

Update your forwardRef render function to accept both props and ref parameters:

Before (incorrect):

jsx
const MyInput = forwardRef(function MyInput(props) {
  return <input className={props.className} />;
});

After (correct):

jsx
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.

2Fix destructured props syntax

If you're destructuring props, make sure to include ref as a separate parameter:

Before (incorrect):

jsx
const Button = forwardRef(function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
});

After (correct):

jsx
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.

3Update arrow function components

Arrow functions also need both parameters:

Before (incorrect):

jsx
const TextArea = forwardRef((props) => {
  return <textarea value={props.value} />;
});

After (correct):

jsx
const TextArea = forwardRef((props, ref) => {
  return <textarea ref={ref} value={props.value} />;
});
4Attach the ref to a DOM element or component

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:

jsx
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.

Advanced notes

TypeScript typing:
When using TypeScript, properly type both parameters:

typescript
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:

jsx
// 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:

jsx
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} />;
});

Frequently asked questions

What does "forwardRef render functions accept exactly two parameters: props and r" mean?
This warning is React's way of enforcing the correct function signature for forwardRef components. 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.
How do I fix "forwardRef render functions accept exactly two parameters: props and r"?
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.
What causes "forwardRef render functions accept exactly two parameters: props and r"?
Render function only accepts props parameter without including ref Function signature uses destructured props without a second ref parameter Arrow function omits the ref parameter entirely
Is the "forwardRef render functions accept exactly two parameters: props and r" error serious?
It is a low-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading