react.dev/content/docs/forwarding-refs.md

id	title	permalink
forwarding-refs	Forwarding Refs	docs/forwarding-refs.html

Ref forwarding is a technique for passing a ref through a component to one of its descendants. This technique can be particularly useful with higher-order components (also known as HOCs).

Let's start with an example HOC that logs component props to the console: embed:forwarding-refs/log-props-before.js

The "logProps" HOC passes all props through to the component it wraps, so the rendered output will be the same. For example, we can use this HOC to log all props that get passed to our "fancy button" component: embed:forwarding-refs/fancy-button.js

There is one caveat to the above example: refs will not get passed through. That's because ref is not a prop. Like key, it's handled differently by React. If you add a ref to a HOC, the ref will refer to the outermost container component, not the wrapped component.

This means that refs intended for our FancyButton component will actually be attached to the LogProps component: embed:forwarding-refs/fancy-button-ref.js

Fortunately, we can explicitly forward refs to the inner FancyButton component using the React.forwardRef API. React.forwardRef accepts a render function that receives props and ref parameters and returns a React node. For example: embed:forwarding-refs/log-props-after.js