[DEPRECATED FROM REACT 19] While the convention for higher-order components is to pass through all props to the wrapped component, this does not work for refs. That’s because ref is not really a prop like key, it’s handled specially by React. If you add a ref to an element whose component is the result of an HOC, the ref refers to an instance of the outermost container component, not the wrapped component. The solution for this problem is to use the React.forwardRef API (introduced with React 16.3).
Historically, passing a ref through an HOC was a major pain point because ref was treated as a special prop that didn't automatically pass through to the wrapped component.
Since ref is now just a prop, you no longer need to wrap your HOC's returned component in forwardRef. You simply spread the props, and the ref will naturally flow to the underlying
In React 19, forwardRef is effectively being deprecated in favor of treating ref as a standard prop. You can now access ref directly from the props object in functional components, just like any other value
0-2 years experience
2-5 years experience
5-8 years experience
8+ years experience
