forwardRef & useImperativeHandle

The plain-language idea

<input ref={myRef} /> works because input is a real DOM element with a node for React to hand myRef.current. <CustomInput ref={myRef} /> does not work the same way by default — a function component has no instance, so there's nothing to attach the ref to, and ref isn't even passed through as a normal prop.

forwardRef is the explicit opt-in that lets a custom component receive a ref and decide where it points:

const CustomInput = forwardRef(function CustomInput(props, ref) {
  return <input {...props} ref={ref} />;   // forward it to the real DOM node inside
});

<CustomInput ref={myRef} />   // myRef.current is now the actual <input> DOM node

<CustomInput ref={myRef} /> — ref isn't passed as a normal prop. On a plain function component, it does nothing.

BackNext

const CustomInput = forwardRef(function CustomInput(props, ref) {
  const inputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    clear: () => { inputRef.current.value = ""; },
  }));
  return <input {...props} ref={inputRef} />;
});
// myRef.current is now { focus, clear } — not the raw DOM node

What people usually miss

Watch out

• This is an escape hatch, not a default pattern. Reach for imperative refs (focus, scroll-into-view, play/pause a video) when the DOM itself is genuinely the right tool — most component communication should stay declarative (props, state), not imperative.
• Without forwardRef, passing ref to a custom component either does nothing or logs a warning — ref is deliberately excluded from props in a plain function component; it can only be received through the second argument forwardRef provides.
• useImperativeHandle's exposed object is only recomputed based on its own dependency array (the third, optional argument) — forgetting a dependency there causes the same stale-closure risk as any other hook with a dependency array.

Why this matters in interviews

"How would you let a parent component call .focus() on a custom input?" is a direct, practical test of forwardRef/useImperativeHandle — and recognizing when not to reach for this (most of the time) is just as much a part of a strong answer as knowing the API.