React 19 Deprecates forwardRef: A Guide to Passing ref as a Standard Prop

With React 19, the React team has streamlined how refs are handled in components, marking a significant shift in API design. The forwardRef utility is now deprecated, allowing developers to pass ref directly as a standard prop. This change simplifies component architecture and aligns with React's ongoing efforts to reduce boilerplate. Let’s explore what this means for your codebase and how to adapt.

Photo by Lautaro Andreani on Unsplash

What Was forwardRef?

Before React 19, functional components couldn’t inherently receive ref props because React reserved them for class components and DOM elements. To work around this, forwardRef explicitly forwarded refs to child components or DOM nodes.

Example: Pre-React 19 Usage

import React, { forwardRef } from 'react';

const MyButton = forwardRef((props, ref) => (
  <button ref={ref} {...props}>
    {props.children}
  </button>
));

// Usage
const App = () => {
  const buttonRef = React.useRef();
  return <MyButton ref={buttonRef}>Click Me</MyButton>;
};

While functional, this pattern introduced boilerplate and complexity, especially for newcomers.

What’s New in React 19?