react ref_error ai_generated true

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

ID: react/react-forward-ref-error

Also available as: JSON · Markdown
91%Fix Rate
93%Confidence
130Evidence
2021-06-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

A ref is passed to a function component that does not use forwardRef(). Function components do not support ref prop directly in React <19.

generic

Workarounds

  1. 93% success Wrap the function component with React.forwardRef() 
    const MyComponent = React.forwardRef((props, ref) => { return <div ref={ref}>{props.children}</div>; });

    Sources: https://react.dev/reference/react/forwardRef

  2. 90% success In React 19+, use ref as a regular prop without forwardRef 
    function MyComponent({ ref, children }) { return <div ref={ref}>{children}</div>; }

    Sources: https://react.dev/blog/2024/12/05/react-19

Dead Ends

Common approaches that don't work:

  1. Pass ref as a differently named prop (e.g., innerRef) 55% fail

    Breaks convention, does not work with third-party libraries expecting standard ref prop, and makes the API inconsistent

  2. Convert the function component to a class component to support refs 60% fail

    Unnecessary migration; loses hooks support and modern React patterns. forwardRef is the intended solution.

Error Chain

Leads to:
Preceded by:
Frequently confused with: