What are forwardRef and useImperativeHandle for?

Question

Accepted Answer

A `ref` passed to a custom component does **not** automatically reach a DOM node inside it. **`forwardRef`** lets a component receive a ref and attach it to a child element. **`useImperativeHandle`** customizes *what* that ref exposes. ## Forwarding a ref to a DOM node ```jsx const TextInput = forwardRef(function TextInput(props, ref) { return ; // parent's ref now points to the }); // parent can focus the inner input: const ref = useRef(null); ; // ref.current.focus(); ``` ## Exposing a custom API instead of the raw node Sometimes you don't want to leak the whole DOM node — only specific methods: ```jsx const FancyInput = forwardRef(function FancyInput(props, ref) { const inner = useRef(null); useImperativeHandle(ref, () => ({ focus: () => inner.current.focus(), clear: () => { inner.current.value = ""; }, }), []); return ; }); // parent: fancyRef.current.focus(); fancyRef.current.clear(); ``` ## When to use it (sparingly) Prefer props/state for communication. Reach for refs only for genuinely **imperative** needs: focus management, scrolling, text selection, media playback, or integrating imperative libraries. Note: in **React 19**, `ref` can be passed as a normal prop, so `forwardRef` is often no longer required.