forwardRef

Lets a component expose a DOM node or handle to its parent via ref.

Since React 16.3 Spec ↗

Syntax

const Cmp = forwardRef(render)

Parameters

NameTypeRequiredDescription
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.

See also