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

ReactBEGINNERLOWUpdated Dec 9, 2025· 114 views

This React warning occurs when a forwardRef render function is defined with an incorrect number of parameters. React expects forwardRef components to accept exactly two parameters: props and ref, but the function signature does not match this requirement.

Quick fix

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

// ❌ Incorrect - only one parameter
const MyInput = forwardRef((props) => {
  return <input {...props} />;
});

// ❌ Incorrect - more than two parameters
const MyButton = forwardRef((props, ref, extra) => {
  return <button ref={ref} {...props} />;
});
  1. Locate the forwardRef component causing the warning
  2. Update the function signature to accept both props and ref
  3. Forward the ref to the appropriate DOM element or component
  4. Test that refs work correctly
react — error
// ❌ Incorrect - only one parameter
const MyInput = forwardRef((props) => {
  return <input {...props} />;
});
// ❌ Incorrect - more than two parameters
const MyButton = forwardRef((props, ref, extra) => {
  return <button ref={ref} {...props} />;
});
forwardRef render functions accept exactly two parameters: props and ref

What this error means

This warning is displayed by React when you use React.forwardRef() but the render function you pass to it doesn't accept exactly two parameters. React's forwardRef API is designed to forward refs to child components, and it always calls your render function with two arguments: the props object and the ref object. The warning typically appears when you define a forwardRef component with only one parameter (just props) or with more than two parameters. This is problematic because React will still pass both arguments to your function, but if you only destructure props or define additional parameters, the ref won't be properly received or forwarded. Even if you don't intend to use the ref parameter, React requires you to include it in the function signature to maintain consistency and avoid potential issues. The ref parameter may be null if no ref was passed from the parent component, but it must still be present in the function signature.

Typical symptoms

  • Warning appears in browser console during development
  • The message specifically mentions "forwardRef render functions accept exactly two parameters: props and ref"
  • Component may still render correctly but the ref is not properly forwarded
  • Warning may include "Did you forget to use the ref parameter?" if ref is defined but unused
  • Occurs when using React.forwardRef() wrapper around components

Common causes

  1. Defining the forwardRef render function with only one parameter (props) instead of two
  2. Using additional parameters beyond props and ref in the function signature
  3. Forgetting to include the ref parameter when migrating a regular component to use forwardRef
  4. Destructuring props inline without including the ref parameter
  5. Copy-pasting component code without adapting the function signature for forwardRef

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

1Locate the forwardRef component causing the warning

Check your console warning to identify which component is triggering the error. The warning will typically indicate the component name or location in your code.

Look for code patterns like this:

javascript
// ❌ Incorrect - only one parameter
const MyInput = forwardRef((props) => {
  return <input {...props} />;
});

// ❌ Incorrect - more than two parameters
const MyButton = forwardRef((props, ref, extra) => {
  return <button ref={ref} {...props} />;
});
2Update the function signature to accept both props and ref

Modify your forwardRef render function to accept exactly two parameters. The first parameter should be props, and the second should be ref:

javascript
// ✅ Correct - two parameters
const MyInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

If using a named function:

javascript
// ✅ Correct - named function with two parameters
const MyInput = forwardRef(function MyInput(props, ref) {
  return <input ref={ref} {...props} />;
});

With TypeScript:

typescript
// ✅ Correct - TypeScript with proper typing
const MyInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
  return <input ref={ref} {...props} />;
});
3Forward the ref to the appropriate DOM element or component

Once you've added the ref parameter, make sure to actually use it by passing it to the element or component that should receive the ref:

javascript
// ✅ Forward ref to native element
const FancyButton = forwardRef((props, ref) => {
  return (
    <button ref={ref} className="fancy-button">
      {props.children}
    </button>
  );
});

// ✅ Forward ref to another component
const FormInput = forwardRef((props, ref) => {
  return (
    <div className="form-group">
      <input ref={ref} type="text" {...props} />
    </div>
  );
});

If you need to use the ref internally and expose custom methods, use useImperativeHandle:

javascript
const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    clear: () => {
      if (inputRef.current) inputRef.current.value = '';
    }
  }));

  return <input ref={inputRef} {...props} />;
});
4Test that refs work correctly

Verify that your forwardRef component properly forwards the ref by testing it in a parent component:

javascript
function ParentComponent() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    // This should work if ref is properly forwarded
    inputRef.current?.focus();
  };

  return (
    <div>
      <MyInput ref={inputRef} placeholder="Enter text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

Check that:
- No warnings appear in the console
- The ref correctly points to the expected element
- Methods like focus(), scrollIntoView(), etc. work as expected

Advanced notes

React 19 Changes: In React 19 and later, forwardRef is no longer necessary. You can pass ref as a regular prop instead. The forwardRef API will be deprecated in a future release. For React 19+, you can simply write:

javascript
// React 19+ - no forwardRef needed
function MyInput(props) {
  return <input ref={props.ref} {...props} />;
}

Common Patterns: When working with forwardRef, you may need to handle both internal refs and forwarded refs. This can be accomplished using callback refs or by combining refs:

javascript
const MyComponent = forwardRef((props, forwardedRef) => {
  const internalRef = useRef(null);

  // Combine both refs
  const setRefs = useCallback((element) => {
    internalRef.current = element;
    if (typeof forwardedRef === 'function') {
      forwardedRef(element);
    } else if (forwardedRef) {
      forwardedRef.current = element;
    }
  }, [forwardedRef]);

  return <input ref={setRefs} {...props} />;
});

TypeScript Best Practices: When using forwardRef with TypeScript, provide explicit type parameters for better type safety:

typescript
interface MyInputProps {
  placeholder?: string;
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const MyInput = forwardRef<HTMLInputElement, MyInputProps>(
  (props, ref) => {
    return <input ref={ref} {...props} />;
  }
);

// Add display name for better debugging
MyInput.displayName = 'MyInput';

Performance Considerations: forwardRef does not add significant performance overhead, but if you're creating many forwardRef components, ensure you're not recreating them unnecessarily. Define them outside render functions or memoize them appropriately.

Frequently asked questions

What does "forwardRef render functions accept exactly two parameters: props and r" mean?
forwardRef() but the render function you pass to it doesn't accept exactly two parameters. React's forwardRef API is designed to forward refs to child components, and it always calls your render function with two arguments: the props object and the ref object. The warning typically appears when you define a forwardRef component with only one parameter (just props) or with more than two parameters.
How do I fix "forwardRef render functions accept exactly two parameters: props and r"?
This React warning occurs when a forwardRef render function is defined with an incorrect number of parameters. React expects forwardRef components to accept exactly two parameters: props and ref, but the function signature does not match this requirement.
What causes "forwardRef render functions accept exactly two parameters: props and r"?
Defining the forwardRef render function with only one parameter (props) instead of two Using additional parameters beyond props and ref in the function signature Forgetting to include the ref parameter when migrating a regular component to use forwardRef
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