# Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you accidentally pass children as a separate prop?

- **ID:** `react/forwardref-children-prop`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 90%

## Root Cause

When using React.forwardRef, the render function signature is (props, ref) => JSX. Passing children as a third argument or destructuring ref incorrectly causes this warning, often when wrapping a component that expects children as a prop.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 16.8+ | active | — | — |
| React 17.x | active | — | — |
| React 18.x | active | — | — |

## Workarounds

1. **Ensure the forwardRef callback has exactly two parameters: props and ref. Access children via props.children. Example: const MyComponent = React.forwardRef((props, ref) => <div ref={ref}>{props.children}</div>);** (95% success)
   ```
   Ensure the forwardRef callback has exactly two parameters: props and ref. Access children via props.children. Example: const MyComponent = React.forwardRef((props, ref) => <div ref={ref}>{props.children}</div>);
   ```
2. **If using TypeScript, define the component with React.PropsWithChildren<P> and forwardRef: const MyComponent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<{}>>((props, ref) => ...);** (90% success)
   ```
   If using TypeScript, define the component with React.PropsWithChildren<P> and forwardRef: const MyComponent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<{}>>((props, ref) => ...);
   ```
3. **For class components, avoid forwardRef and use a callback ref pattern: <div ref={(node) => { this.myRef = node; }}>** (75% success)
   ```
   For class components, avoid forwardRef and use a callback ref pattern: <div ref={(node) => { this.myRef = node; }}>
   ```

## Dead Ends

- **** — React's forwardRef only passes two arguments; the third parameter is always undefined. (95% fail)
- **** — React does not pass ref through props; it's a separate argument. This breaks ref forwarding. (85% fail)
- **** — Overcomplicates the component hierarchy without fixing the forwardRef signature mismatch. (70% fail)