What are forwardRef and useImperativeHandle for?
Quick answer
forwardRef lets a parent attach a ref to a DOM node inside a child. useImperativeHandle exposes a custom method API through that ref instead of the raw node.
In detail
Refs don't pass through components like props. forwardRef forwards a ref to an inner element so a parent can, say, focus a custom input. useImperativeHandle lets the child expose a limited, intentional API (open(), reset()) rather than the whole DOM node. In React 19, ref can be received as a normal prop, making forwardRef largely unnecessary.
1const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);
2
3const Modal = forwardRef((props, ref) => {
4 const [open, setOpen] = useState(false);
5 useImperativeHandle(ref, () => ({ open: () => setOpen(true) }));
6 return open ? <div className="modal">{props.children}</div> : null;
7});Why interviewers ask this: A deeper hooks/ref question at product companies.
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399