forwardRef: Exposing DOM Refs to Parents

A ref is a way to hold a reference to a DOM node or component instance that persists across renders without triggering re-renders. You attach one with the ref attribute, and React fills in its current property after committing to the DOM.

The catch is that you cannot attach a ref to a function component the way you would a div. By default a parent has no path to reach the DOM node living inside a child component, because refs are not passed down like ordinary props.

React.forwardRef lets a component receive a ref from its parent and forward it onward to one of its own elements. It wraps your component function and changes the function signature so that ref arrives as a second argument alongside props.

This is the official escape hatch for exposing an inner DOM node to a calling component, turning an otherwise opaque child into one whose element a parent can directly reference.