useRef, useMemo, and useCallback — React 19 & Ecosystem

Beyond state and effects, React offers hooks for three specific needs: useRef holds a mutable value that persists across renders without causing re-renders, useMemo caches the result of an expensive computation, and useCallback caches a function's identity. Each solves a distinct problem, and using them appropriately — and not over-using them — keeps components both correct and fast.

useRef is your escape hatch for values that should survive renders but not trigger them — most commonly a reference to a DOM element, or a mutable value like a timer id. useMemo and useCallback are optimisation hooks: they avoid recomputing or recreating something on every render when its inputs have not changed, which matters for expensive work and for referential stability.

These hooks are easy to misapply, scattering memoisation everywhere 'for performance' and adding complexity without benefit. React 19's compiler can automate much memoisation, but understanding what these hooks do, and when they genuinely help, remains essential. This lesson covers each hook, its proper use, and the discipline of optimising deliberately rather than reflexively.

Analogy🏏Cricket

🏏 Think of it like cricket: Just as a captain sketches the desired field on a planning board first, then compares it to the current field to move only the fielders who need to shift — rather than clearing the ground and re-placing all eleven — React builds a new Virtual DOM plan, diffs it against the old, and moves only what changed. The insight is that planning on paper and adjusting the minimum is far cheaper than rearranging everything from scratch, which is exactly what reconciliation achieves.