useRef gives you a mutable box whose .current value sticks around between renders — and updating it does not trigger a re-render.
The most common job: grab a DOM node so you can call imperative APIs like focus(), scrollIntoView(), or play().
Pattern
const inputRef = useRef(null);
// 1. Attach the ref
<input ref={inputRef} />
// 2. Use the node
inputRef.current.focus();
Your Task
Build a search bar that focuses programmatically:
- Create a ref with
useRef(null)
- Attach it to the
<input id="search">
- Wire
<button id="focus-btn"> so clicking it focuses the input