Frontend: When to Memoize (useMemo / useCallback / React.memo)

1. Profile first. React DevTools Profiler tells you what's slow. Don't memoize speculatively; you usually trade one allocation for another and add complexity.

2. Use `useMemo` when:

- The computation is genuinely expensive (>~5ms is a useful rule of thumb; below that the deps comparison costs more than the recompute).

- The value is a non-primitive used as a dep elsewhere (e.g. a derived array fed into another `useMemo` or `useEffect`) - reference stability avoids cascading recomputation.

3. Use `useCallback` when:

- You're passing a function to a `React.memo`-wrapped child - without stable refs, memo is defeated.

- You're passing a function as a dep to `useEffect` and want to avoid re-running.

4. Use `React.memo` when:

- A component re-renders frequently due to parent updates and its own work is non-trivial.

- Its props are mostly stable.

The React 19 caveat: the React Compiler (formerly "Forget") auto-memoizes provably-pure values, making manual memoization mostly unnecessary in compiler-enabled codebases. Until then, profile-driven memoization is the right approach.

Anti-pattern: wrapping every callback in `useCallback` "just in case". This adds deps-array overhead, complicates code, and rarely helps - unless the callback flows into a `React.memo` boundary, the stable ref doesn't save anything because the child re-renders for other reasons.