Warning: Function components cannot be given refs — forwardRef migration in React 19

What causes this error

Before React 19, plain function components couldn't receive a ref prop directly — you had to wrap them in forwardRef to opt in. React 19 made ref a normal prop for function components, so `forwardRef` became optional for new code. This warning appears when you're still on an older React version doing this, or when a component wrapped in `forwardRef` is nested awkwardly so the ref never actually reaches the DOM node.

The Fix

// Old pattern — still works in React 19, but no longer required
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);

// React 19 — ref is just a normal prop now
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

If you're not yet on React 19, either upgrade or keep the `forwardRef` wrapper — mixing the two styles in a codebase is fine during a gradual migration, just don't drop `forwardRef` before confirming your installed React version actually supports plain-prop refs.

Common causes / variations

• Copying React 19-style code (`ref` as a destructured prop) into a project still on React 18
• A component wrapped twice — once by its own `forwardRef` and again by a parent HOC also expecting to forward a ref
• Class components, which never supported this pattern and still require `React.createRef`/callback refs

Related errors

See also: Invalid hook call, event handlers cannot be passed to Client Component props.