jsschools
forwardRef

Let Callers Pass a Ref Through Your Component

forwardRef

By default, `ref` doesn't flow to a custom component. `forwardRef` lets your component forward a ref to a child element. React 19 also accepts `ref` as a regular prop.

3 min read Level 2/5 #react#refs#forwardRef
What you'll learn
  • Forward a ref to an inner element
  • Use the React 19 `ref` prop directly

A parent might want a ref to a DOM node inside a child component — to focus an input, measure it, scroll it. But by default, passing ref to a function component does nothing.

Two ways to forward the ref through: the classic forwardRef, and (in React 19) ref as a regular prop.

The Classic — forwardRef

import { forwardRef } from "react";

const FancyInput = forwardRef(function FancyInput(props, ref) {
  return <input ref={ref} className="fancy" {...props} />;
});

function Form() {
  const inputRef = useRef(null);
  useEffect(() => inputRef.current.focus(), []);
  return <FancyInput ref={inputRef} placeholder="Name" />;
}

The component declares it forwards a ref; the parent passes one; React routes the ref to the inner <input>.

React 19 — ref as a Prop

In React 19, function components can accept ref as a regular prop, no forwardRef wrapper needed:

function FancyInput({ ref, ...rest }) {
  return <input ref={ref} className="fancy" {...rest} />;
}

// Same caller as before
<FancyInput ref={inputRef} />

Both styles work, and you’ll see both in real codebases for the near future.

When To Forward

  • Wrappers around native HTML elements (Input, Button, Card)
  • Component libraries (callers expect refs to “just work”)

For higher-level components that manage their own DOM, often you don’t want callers reaching in with refs — keep the API clean.

Up Next

A common performance tool — React.memo.

React.memo →