React 19+ · Function

forwardRef

forwardRef lets a component expose a child DOM node or imperative handle through a parent ref. In React 19, it is no longer necessary for function components because ref can be received directly as a prop, and it will be deprecated in a future release.

How it works

forwardRef accepts a render function and returns a component that can receive a ref. The render function receives the parent’s props and ref, then normally attaches that ref to a child element or passes it to useImperativeHandle. React 19 makes this wrapper unnecessary for function components because ref can be received directly as a prop.

Syntax

const SomeComponent = forwardRef(render)

Parameters

Name	Type	Description
`render`	`function`	The render function for the component. React calls it with the received props and ref, and its returned JSX becomes the component output.

Returns

A React component that can receive a ref prop and render the result of the supplied function.

Key points

Its purpose is to make a descendant DOM node available through a parent-held ref.
Wrap a render function when using the legacy forwarding pattern.
The wrapper’s render function gets both ordinary props and the incoming ref.
The render function returns the JSX that the resulting component renders.
Forwarded refs support either object refs or callback refs.
Use the returned value as a component in JSX.

Common mistakes

For new React 19 function components, prefer a ref prop rather than introducing forwardRef.
Do not silently discard the received ref; attach it to the intended child or customize its exposed handle.
Handle the absent-ref case because the render function can receive null.

Example: Use ref as a prop in React 19

import { useRef } from 'react';

function MyInput({ ref, placeholder }: {
  ref: React.Ref<HTMLInputElement>;
  placeholder: string;
}) {
  return <input ref={ref} placeholder={placeholder} />;
}

export default function Form() {
  const inputRef = useRef<HTMLInputElement>(null);
  return (
    <>
      <MyInput ref={inputRef} placeholder="Name" />
      <button onClick={() => inputRef.current?.focus()}>Focus</button>
    </>
  );
}

In React 19, pass ref directly as a prop to a function component instead of wrapping it with forwardRef.

When to use it

Forward a DOM ref

Legacy or compatibility code needs a function component to accept a parent ref and attach it to a descendant DOM element.

Expose an imperative handle

A component exposes methods or a custom value rather than its underlying DOM node.

Maintain older-version compatibility

A React 18-compatible component must accept refs before migrating to React 19’s direct ref prop.

Interview questions

QWhat does forwardRef do?

forwardRef(render) takes a render function and returns a React component that can receive a ref prop. React invokes render with the component props and the parent-provided ref.

Follow-up: How should the render function use the ref? Pass it to a child component or give it to useImperativeHandle to expose a chosen value.

QWhat arguments does the forwardRef render function receive?

The render function receives two arguments: props and ref. The ref may be an object or a callback, and it is null when the parent did not provide one.

Follow-up: What should a component do when the ref is null? It should remain valid without assuming that a parent supplied a ref.

QShould forwardRef be used in new React 19 code?

React 19 lets function components receive ref directly as a prop, so forwardRef is no longer necessary for new components. The documentation says forwardRef will be deprecated in a future release.

Follow-up: How would you modernize an existing wrapper? Move ref into the component’s props and attach it directly to the target element.

useImperativeHandle
useRef
memo

Source: forwardRef. Checked 2026-10-15.