What is React.forwardRef and when do you use it?
Why Interviewers Ask This
Mid-level React.js roles require deep understanding of this topic. Interviewers ask this to separate candidates who truly understand the mechanics from those who only know surface-level concepts.
Answer
React.forwardRef creates a component that forwards the ref it receives to a child DOM element or another component. By default, refs do not pass through function components — <MyInput ref={ref} /> does not give you access to the input DOM node inside MyInput. With forwardRef: const MyInput = React.forwardRef((props, ref) => { return <input ref={ref} {...props} />; });. Now a parent can do: const inputRef = useRef(); <MyInput ref={inputRef} /> and call inputRef.current.focus(). When to use: (1) Building a reusable input/button/select component library where consumers need ref access. (2) Integrating with animation libraries that need DOM references. (3) Focus management in accessible component systems. Combine with useImperativeHandle: to expose a custom API instead of the raw DOM node. In React 19, ref is passed as a regular prop — forwardRef is no longer needed and is being deprecated. Until then, forwardRef is required for any reusable component that needs to accept a ref.
Common Mistake
Don't just define the term — demonstrate that you understand when to use it and when not to. Showing awareness of trade-offs is what separates average from strong React.js candidates.
Previous
What is the useSyncExternalStore hook?
Next
What is the difference between React.cloneElement and React.createElement?