migrating-from-forwardref

React 19 deprecates forwardRef in favor of passing ref as a regular prop. Convert your component to accept ref as a prop parameter, remove the forwardRef wrapper and React.forwardRef import, and update TypeScript types to include ref in the component's prop interface. This simplifies your component definition while maintaining ref functionality.

forwardRef was a workaround to pass refs through components that normally wouldn't accept them. React 19 treats ref as a regular prop, eliminating the need for the wrapper. This reduces boilerplate, improves TypeScript inference, and makes components simpler and more intuitive.

Add ref to your component's prop interface using React.RefObject or React.Ref with the appropriate element or imperative handle type. Remove ForwardRefRenderFunction or React.forwardRef from type definitions. This ensures proper type checking and IDE autocomplete for ref-accepting components.

Yes, useImperativeHandle works identically with the ref-as-prop pattern. Define your imperative handle inside useImperativeHandle, attach it to the ref prop, and the ref will expose those methods. No changes to your useImperativeHandle logic are needed.

forwardRef wraps a component and requires a special second parameter to access refs; ref-as-prop treats ref like any other prop. The new approach is simpler, requires less code, integrates better with TypeScript, and is the recommended React 19 pattern for components that need ref access.

Yes, ref-as-prop fully supports custom imperative handles via useImperativeHandle. Declare your ref prop with type matching your handle shape, attach it in useImperativeHandle, and consumers can call those exposed methods. This works for DOM refs and custom object refs alike.