forwardRef
Lets a component expose a DOM node or handle to its parent via ref.
Syntax
const Cmp = forwardRef(render) Parameters
| Name | Type | Required | Description |
|---|---|---|---|
render | function | Yes | Render function receiving (props, ref) and returning React elements. |
Returns
component — A component that can receive a ref and forward it.
Examples
const Input = forwardRef(function Input(props, ref) {
return <input ref={ref} {...props} />;
});
function Form() {
const ref = useRef(null);
return <Input ref={ref} />;
}
Notes
In React 19, function components can accept `ref` as a regular prop, making
forwardRef largely unnecessary for new code; it remains supported for
backward compatibility. Combine with useImperativeHandle to expose a custom
handle instead of the raw node.