Two related APIs around imperative escape hatches in a mostly-declarative library.

forwardRef

const Input = forwardRef<HTMLInputElement, Props>((props, ref) => (
  <input ref={ref} {...props} />
));

Without forwardRef, a parent passing ref to <Input> would attach to the component instance (function components have no instance, so it'd be null). forwardRef lets the ref reach the DOM node.

Use it on leaf primitives that wrap a single DOM element — Button, Input, Textarea, MenuItem.

React 19 update

React 19 lets regular function components accept ref as a regular prop:

function Input({ ref, ...props }: Props & { ref?: Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />;
}

forwardRef is being deprecated. New code in React 19+ should use prop-style refs.

useImperativeHandle

When you don't want to expose the DOM node directly but a curated API:

type DialogHandle = { open: () => void; close: () => void };

const Dialog = forwardRef<DialogHandle, Props>((props, ref) => {
  const [open, setOpen] = useState(false);
  useImperativeHandle(ref, () => ({
    open: () => setOpen(true),
    close: () => setOpen(false),
  }), []);
  return open ? <DialogShell ...> ... </DialogShell> : null;
});

// Parent
const dialogRef = useRef<DialogHandle>(null);
dialogRef.current?.open();

The ref now exposes open() / close() instead of the DOM node — encapsulated imperative API.

When to use which

When to avoid

• Don't reach for imperative APIs to do what state can do. <Dialog open={isOpen}> is cleaner than ref.current.open().
• Don't use useImperativeHandle to leak internals. If you expose 10 methods, the component is doing too much.

Use cases that legitimately need imperative handles

• Animations that don't fit declaratively (focus management after a transition).
• Third-party integration (a Stripe payment form ref that exposes submit()).
• Library components with measure / scrollIntoView / focus methods.

Gotcha: ref + memo

Until React 19, you needed forwardRef inside memo() in a specific order. In 19, both go away as constraints.

Interview framing

"forwardRef lets a parent ref reach through your component to the underlying DOM node — typically for design-system primitives. useImperativeHandle lets you expose a curated set of methods (focus, open, scrollIntoView) instead of the raw node. Use it when there's a legitimate imperative need — animation, focus orchestration, third-party widget control — but prefer declarative props for state-driven behavior. In React 19, function components accept ref as a regular prop, so forwardRef is being deprecated; useImperativeHandle still works the same."