React Hooks

React forwardRef

forwardRef lets a parent pass a ref through your component down to a DOM node inside it. Without it, putting ref on a custom component gives the parent nothing, because ref is not an ordinary prop.

What is forwardRef in React?

forwardRef lets a parent pass a ref through your component down to a DOM node inside it. Without it, putting ref on a custom component gives the parent nothing, because ref is not an ordinary prop.

Why forwardRef matters

Design-system components — a styled Input, a Button — still need to be focusable, measurable and usable with form libraries. Forwarding the ref keeps them as capable as the raw element they wrap.

forwardRef example

Forwarding a ref to the inner input

JSX

import { forwardRef } from 'react';

const TextField = forwardRef(function TextField({ label, ...rest }, ref) {
  return (
    <label>
      {label}
      <input ref={ref} {...rest} />
    </label>
  );
});

// parent
const emailRef = useRef(null);
<TextField ref={emailRef} label="Email" />;
emailRef.current.focus();   // works

How this works

forwardRef gives the component a second parameter holding the ref, which you attach to whichever internal element should receive it.

Key points to remember

ref and key are not part of props — they are handled specially by React.
In React 19 a function component can accept ref as a normal prop, making forwardRef optional for new code.
Pair it with useImperativeHandle when you want to expose methods rather than the raw node.

Common mistakes with forwardRef

Putting ref on a custom component without forwardRef and getting null in older React versions.
Forwarding the ref to a wrapper div when the caller expects the input.