Module 05 Recap
Module 05 covered computing values from state efficiently, caching expensive computations, stabilizing function references, and preventing unnecessary re-renders. Here is a summary.
What you learned
Section titled “What you learned”Derive state instead of storing it. Any value computable from existing state should be a plain variable during render — not a useState. Removing duplicate state eliminates synchronization bugs.
useMemo caches expensive computations. Pass a compute function and a dependency array. The result is recalculated only when dependencies change. Use it for large dataset computations and values passed to memoized children — not for simple arithmetic.
useCallback stabilizes function references. A memoized child that receives a new function reference every render will still re-render. useCallback keeps the reference stable so React.memo can do its job.
React.memo skips renders when props are unchanged. It compares props by reference. For it to work, all object and function props must be stabilized with useMemo and useCallback.
Measure before optimizing. The React DevTools Profiler shows which components render, how often, and how long. Apply optimization only where you measure a real cost.
Key terms
Section titled “Key terms”| Term | Meaning |
|---|---|
| Derived state | A value computed from existing state — no useState needed |
useMemo | Caches a computed value; recalculates only when dependencies change |
useCallback | Caches a function reference; prevents unnecessary re-renders in memoized children |
React.memo | Wraps a component to skip re-renders when props have not changed |
| Memoization triad | React.memo + useCallback + useMemo working together |
What is next
Section titled “What is next”Module 06 — Custom Hooks and Context — covers extracting component logic into reusable custom hooks and sharing state across the component tree without prop drilling. You will pull ZeroBudget’s entire state layer out of App.jsx into a useBudget hook and expose it through a BudgetContext.