Refs provide an escape hatch to DOM nodes and imperative APIs. forwardRef lets wrapper components pass refs through to children.
Common Interview Questions
Q: useRef vs createRef?
Answer: useRef persists across renders in function components. createRef is for class components and recreates if called each render in functions (anti-pattern).
Q: forwardRef example
Answer: Parent can focus the inner input via ref. React 19 may pass ref as a regular prop — know both patterns.
const Input = forwardRef(function Input(props, ref) {
return <input ref={ref} {...props} />;
});
Q: useImperativeHandle?
Answer: Customize the instance value exposed to parent refs — expose focus() method instead of raw DOM node for encapsulation.
Q: When NOT to use refs?
Answer: Do not store derived data or anything that should trigger re-renders in refs. Do not use refs for what state can handle declaratively.
Key Points for Interviews
-
Refs bypass React declarative model — use sparingly
-
forwardRef for reusable input/button libraries
-
useImperativeHandle limits exposed API
-
Callback refs work for dynamic mounting
-
Do not read/write ref.current during render