Reaching past the wrapper
Refs do not pass through components like ordinary props, so a parent that puts a ref on a custom component gets the component, not its inner dom node. Ref forwarding is the mechanism that lets a component receive a ref and attach it to an element inside, exposing that node to the parent.
- A normal ref on a component does not reach inner dom.
- Forwarding receives the ref as a second argument.
- The component attaches it to its real element.
When and how to expose
Forwarding suits reusable wrappers like inputs or buttons whose consumers need to focus or measure the underlying node. You can also narrow what the parent sees with an imperative handle, exposing chosen methods rather than the raw node.
- Forward a ref so consumers can focus or measure the node.
- Use an imperative handle to expose a small, controlled api.
- Avoid forwarding when consumers should not touch the dom.
Forwarding keeps a component reusable while still letting parents reach the element when they genuinely need it.
Key idea
Ref forwarding lets a component receive a ref and attach it to an inner element, exposing the underlying node so a parent can focus or measure it.