Interview · Refs
forwardRef
Passing a ref into a component
forwardRef lets a component expose its internal DOM node to a parent via ref. Without it, passing ref to a custom component does nothing — ref is not a regular prop and React intercepts it.
Why ref is not a prop
React reserves ref (along with key) and doesn't pass it as a regular prop. If you want the parent to access a child's internal DOM, the child must explicitly opt in with forwardRef.
useImperativeHandle
Instead of exposing the raw DOM node, you can use useImperativeHandle together with forwardRef to expose only the operations you want to allow (focus, scroll, play…) — hiding the real DOM and maintaining the component's encapsulation.
Common pitfalls
- 01In React 19, forwardRef is no longer needed — ref can be passed as a regular prop. If you're on React 18 or earlier, it's still required.
- 02Exposing the raw DOM breaks encapsulation. Prefer useImperativeHandle to limit what the parent can do.
- 03forwardRef only forwards the ref one level — if your inner component is also custom, it needs its own forwardRef.
Was this helpful?
Sign in to give feedback