React 19 Remove forwardRef

React has introduced changes in version 19 that make forwardRef unnecessary. This codemod helps you migrate your code to reflect these changes, allowing you to clean up your components by removing forwardRef and using ref as a prop directly.

forwardRef is no longer necessary

Usage

This codemod will automatically update your React components, removing forwardRef and modifying the ref usage to be compatible with React 19's changes.

Before

Given a component using forwardRef:

import { forwardRef } from 'react';

const Button = forwardRef((props, ref) => {
  return (<button ref={ref}>{props.label}</button>);
});

After

The codemod changes it to:

import { forwardRef } from 'react';

const Button = (props) => {
  return (<button ref={props.ref}>{props.label}</button>);
};

How it Works

The codemod performs the following transformations on your code:

  1. It removes the forwardRef import from your React components.
  2. It transforms components that use forwardRef so that they directly use props.ref, aligning with React 19's new capabilities.

References