← React Beginner Questions - Set 6 Q57

What is the purpose of React.forwardRef?

React Beginner Questions - Set 6

A ref is not a prop: it never reaches a function component's props. `forwardRef` is how a ref is handed through to a DOM node inside.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import { forwardRef, useRef } from 'react';

const TextInput = forwardRef(function TextInput(props, ref) {
  return <input ref={ref} {...props} />;
});

export default function Form() {
  const emailRef = useRef(null);

  return (
    <form onSubmit={e => { e.preventDefault(); emailRef.current.focus(); }}>
      <TextInput ref={emailRef} placeholder="email" />
      <button type="submit">Focus the field</button>
    </form>
  );
}

What to notice

• Without `forwardRef`, `<TextInput ref={...} />` warns and the ref stays `null`.
• The ref is the second argument, not part of `props` — a deliberate API decision.
• The second parameter of `forwardRef`'s render function must be named `ref`, or tooling cannot reorder it.