Module 04 Recap
Module 04 covered rendering dynamic lists from state, running side effects with useEffect, persisting data to localStorage, fetching from APIs, and writing correct dependency arrays. Here is a summary.
What you learned
Section titled “What you learned”Dynamic lists flow from state. Use [...prev, newItem] to add and prev.filter(...) to remove — never mutate. Always handle the empty state with a fallback. Filter and sort before passing to a rendering component — that is derived data, not separate state.
useEffect handles side effects. It runs after renders. The dependency array controls when: empty for once-only, specific values to watch. Always include everything the effect reads. Return a cleanup function for timers, listeners, and abortable fetches.
localStorage gives you free persistence. Save on change with a useEffect. Initialize with the lazy function form of useState. Wrap both in a useLocalStorage hook for a clean, reusable API. Key by month/year to store each month independently.
Fetch in an effect, never at the top level. Use three state variables — loading, error, data — to handle the three possible UI states. Define an async function inside the effect and call it. Abort in-flight fetches on cleanup.
Dependency arrays must be complete. Missing a dependency causes stale closures. Depending on an object reference causes effects to run every render. Depend on primitives. Use the functional update form to avoid depending on the state you are updating.
Key terms
Section titled “Key terms”| Term | Meaning |
|---|---|
useEffect | Hook for running side effects after renders |
| Dependency array | Controls when useEffect re-runs — empty for once, values to watch for changes |
| Cleanup function | Returned from an effect — cancels timers, listeners, and fetches |
| Lazy initialization | Function form of useState — runs once to compute the initial value |
| Stale closure | Bug where an effect captures an outdated value because a dependency was omitted |
What is next
Section titled “What is next”Module 05 — Derived State and Performance — covers how to compute values from existing state efficiently, when to use useMemo and useCallback, and how to prevent unnecessary re-renders with React.memo. You will apply these tools to ZeroBudget’s category totals and progress bar calculations.