Guided Notes
More Hooks
useRef, useContext, useReducer, useMemo, useCallback, and custom hooks.
useRef
Slide 1 / 5useRef holds a value that survives re-renders but doesn't cause one when it changes. Its main job is pointing at a DOM element:
const inputRef = useRef(null);
<input ref={inputRef} /> <button onClick={() => inputRef.current.focus()}> Search </button>
After render, inputRef.current is the real <input>. Use it for focus, scrolling, measuring, or third-party libraries.
Refs also store values like a timer id or the previous value. Don't read or write ref.current during render β only in effects and handlers.
