React · Theory

forwardRef in React

Theory

94/94

forwardRef in React

ref is not a normal prop. If you put ref={inputRef} on your own <Field />, Field won’t receive it unless you wrap with forwardRef. forwardRef((props, ref) => <input ref={ref} {...props} />) passes the ref to the real DOM node (or to another component that can take it).

Parent then does inputRef.current.focus(). Useful for design-system inputs. React 19 eases some ref-as-prop cases — still know forwardRef; interviews love it.

forwardRef in React — click Focus → name field focuses. Without forwardRef, ref on a custom component is ignored.

Exam tip

Why ref fails on custom components + forwardRef fix.

Example

// forwardRef
import { forwardRef, useRef } from "react";

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

export default function Form() {
  const name = useRef(null);
  return (
    <>
      <Field ref={name} placeholder="Name" />
      <button type="button" onClick={() => name.current.focus()}>
        Focus
      </button>
    </>
  );
}

forwardRef in React — click Focus → name field focuses. Without forwardRef, ref on a custom component is ignored.

Short notes

Why : ref isn’t a regular prop.
How : forwardRef(props, ref).
Useparent focuses child input.

// forwardRef import { forwardRef, useRef } from "react"; const Field = forwardRef(function Field(props, ref) { return <input ref={ref} {...props} />; }); export default function Form() { const name = useRef(null); return ( <> <Field ref={name} placeholder="Name" /> <button type="button" onClick={() => name.current.focus()}> Focus </button> </> ); }

forwardRef in React

Example

Short notes

Questions

forwardRef in React

Example

Short notes

Questions