React 19 simplifies forwarding refs to child components

React 19 continues to polish the developer experience. And how we forward refs to child components has changed recently.

Before React 19

Before React 19, if you wanted to pass a Ref from a parent component to a child component, you needed to use forwardRef function. This was necessary because ref was treated as a special prop.

import { forwardRef } from "react";

const CustomInput = forwardRef((props, ref) => {
  return <input placeholder={props.placeholder} ref={ref} />;
});

CustomInput.displayName = "CustomInput";

After React 19

Now, you can simply pass a ref as a regular prop.

const CustomInput = ({ placeholder, ref }) => {
  return <input placeholder={placeholder} ref={ref} />;
};

Auto update with Codemod

In future versions of React, forwardRef will get deprecated and eventually removed.

To make migration easier, the React team has published a codemod that automatically updates your components to use the new ref prop approach:

npx codemod react/19/remove-forward-ref --target <path>

Check out the React pull request for more details.