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.

The wrapped function takes two parameters: (props, ref). The first is the usual props object, and the second is the forwarded ref. You then spread or attach that ref onto the element you want to expose, such as ref={ref} on an inner input.

Remember that only forwardRef-wrapped components receive this second argument. A plain function component that lists ref as a second parameter will simply receive undefined.

The classic example is a reusable text field component whose inner input you want a parent to focus. By wrapping the field in forwardRef and attaching the forwarded ref to the underlying input element, the parent can call focus on it directly.

This keeps the field component reusable while granting controlled imperative access exactly where it is needed, like focusing the first field of a form on mount.

Forwarded refs also enable measurement. A parent can read offsetWidth, offsetHeight, or call getBoundingClientRect on a child element it received through forwardRef.

This is useful for tooltips, popovers, and layout calculations where the parent must know the exact rendered size or position of an inner element before deciding how to place something relative to it.

Because the forwarded ref points at a real DOM node, the parent can invoke native DOM methods on it. Calling scrollIntoView on a forwarded list item smoothly brings it into view, and scrollTo on a forwarded scroll container repositions its content.

These are imperative actions that have no clean declarative equivalent, which is exactly the kind of interaction refs are meant to handle.

Sometimes the element you want to expose is buried several components deep. You can chain forwardRef so each intermediate layer forwards the ref it receives down to the next, until it finally lands on the target DOM node.

Each wrapper in the chain must itself use forwardRef and pass the ref along, since an ordinary component in the middle would break the connection.

forwardRef and React.memo can be combined to get both ref forwarding and render memoization. The usual order is memo(forwardRef(Component)), wrapping the forwardRef result so the memo comparison still applies.

This pattern appears in performance-sensitive design systems where a frequently rendered component must both expose its node and skip needless re-renders.

In React DevTools a forwardRef component shows up with a ForwardRef label wrapping your component name. This makes it easy to confirm at a glance that a component participates in ref forwarding.

You can give the inner function a name or set a displayName to make the DevTools entry clearer than a generic anonymous ForwardRef label.

forwardRef is for exposing DOM nodes and imperative handles, not for passing data. If a parent needs to influence a child, prefer ordinary props and state rather than reaching in through a ref.

Overusing refs couples components tightly and bypasses React data flow, making behavior harder to follow. Reach for forwardRef only when a declarative prop genuinely cannot express the interaction.

forwardRef remains the standard tool for exposing refs in component libraries and reusable inputs. Newer React versions are moving toward letting ref be passed as a regular prop, but forwardRef is still widely used and important to understand.

Knowing it well prepares you for both existing codebases and the underlying mechanics that any future ref-as-prop syntax builds upon.

Test your understanding of how a forwardRef component receives its ref.

forwardRef solves the limitation that a parent cannot reach a child component DOM node by giving the component a second ref argument it can forward onto an inner element. This enables focusing, measuring, and scrolling child elements.

It composes with memo, can be chained through layers, and shows as ForwardRef in DevTools. Use it for imperative DOM access, not for passing data, which props handle better.