DOM access
Expose a focusable input or other DOM node to a parent component.
React 19+ · Type Alias
ForwardRefRenderFunction
ForwardRefRenderFunction is the render-callback shape used by React's forwardRef pattern: it receives props and a ref and returns JSX. In React 19, new components should generally accept ref as a prop directly because forwardRef is no longer necessary.
How it works
The official React page documents forwardRef rather than a type alias named ForwardRefRenderFunction. In React 19, forwardRef is no longer necessary because function components can receive ref as a prop, and the page says forwardRef will be deprecated in a future release.
Syntax
forwardRef(render)Parameters
| Name | Type | Description |
|---|---|---|
render | (props, ref) => ReactNode | Render function receiving the parent's props and ref and returning the component output. |
props | object | Props passed by the parent to the render function. |
ref | Ref | null | The parent's ref attribute; it may be an object, function, or null. |
Returns
A React component that can be rendered in JSX and, in the documented pattern, receives a ref prop.
Key points
- Its purpose is to make a descendant DOM node reachable through a ref held by the parent.
- The callback's returned JSX defines what the wrapped component renders.
- The wrapper produces a component usable in JSX rather than a one-time rendered value.
- The distinguishing behavior of the returned component is accepting a ref from its parent.
Common mistakes
- For new React 19 code, do not introduce forwardRef solely to pass a ref; receive ref as a prop instead.
- Treat forwardRef as a compatibility pattern for existing code rather than the preferred new API.
- Code handling the forwarded value must support both object refs and callback refs.
- Render logic must tolerate an absent ref.
Example: React 19 ref as a prop
import { useRef } from 'react';
function MyInput({ label, ref }: { label: string; ref: React.Ref<HTMLInputElement> }) {
return <label>{label}<input ref={ref} /></label>;
}
export default function Form() {
const inputRef = useRef<HTMLInputElement>(null);
return <><MyInput label="Name" ref={inputRef} /><button onClick={() => inputRef.current?.focus()}>Focus</button></>;
}In React 19, accept ref directly as a prop instead of wrapping the component in forwardRef. This is the modern replacement for the documented forwardRef pattern.
When to use it
Ref forwarding
Bridge a parent ref to a nested component or element.
Imperative handles
Expose a limited imperative API through useImperativeHandle.
Interview questions
QWhat does forwardRef do?
The page describes a render function receiving props and ref, with the returned JSX becoming the component output. The resulting component can receive a ref from its parent.
Follow-up: What is the React 19 alternative? Define a function component that accepts ref as a prop, avoiding forwardRef for new code.
QWhat arguments does the render function receive?
The render function receives the props supplied by the parent and the ref attribute supplied by the parent. The ref may be an object, a function, or null when omitted.
Follow-up: How should the ref be used? Pass it to a child component or provide it to useImperativeHandle.
QShould new React 19 components use forwardRef?
React 19 makes forwardRef unnecessary for function components because ref is available as a prop. The documentation states that forwardRef will be deprecated in a future release.
Follow-up: How would you migrate? Remove the wrapper and add ref to the component's props, then attach it to the intended DOM node or imperative handle.
Related
forwardRefuseImperativeHandleuseRef