Orientation: the chapter where React code stops looking right and starts being right

1. The promise

You'll know what the next fifteen units cover, why this chapter is the hardest one in Block 4, what you'll have built and broken by the end, and what the assignment grades you on.

2. The mental model

Ch 10 taught you to drive a car in an empty parking lot. Ch 11 teaches you to drive on a real road, where other drivers — the server, other users — are doing things at the same time, and you don't control any of them. The car (React) is the same. The road is new.

(DIAGRAM: the three categories of Ch 11 mistakes — annotated SVG — three labelled columns: "effects that shouldn't exist", "memoisation by superstition", "server data as client data", with one example bug under each)

The chapter at a glance:

• 11.1 to 11.3 — useEffect honestly. When you need it, when you don't, and the cleanup function that stops the leak.
• 11.4 — custom hooks. A function whose name starts with use and which calls hooks. That's the whole rule.
• 11.5 — useRef. Three correct uses. Anything else is a workaround.
• 11.6 — useMemo and useCallback. Most of them are noise. The profiler tells you which ones aren't.
• 11.7 — useReducer. When three useState calls move together, you have a reducer.
• 11.8 — context. Fixes prop drilling and breaks re-render isolation. Use it accordingly.
• 11.9 — error boundaries. The one part of React that has to be a class.
• 11.10 — Suspense, briefly. A loading fallback the framework can place anywhere.
• 11.11 — server state vs client state. The single most important distinction in React after components.
• 11.12 — TanStack Query as the right answer for fetched data.
• 11.13 — when to reach for a form state library, and which one Ch 13 uses.
• 11.14 — render-phase rules. The render function runs many times. Anything inside it must be safe to repeat.
• 11.assign — refactor the deliberately broken dashboard, fix three named bugs, prove it with a profile recording.

3. You do it, with me

There's nothing to install in this unit. Read along.

Open the Ch 10 dashboard project on your machine. You should already have it from Ch 10's assignment.

(SCREENSHOT: VSCode showing the Ch 10 dashboard project open — file tree on the left — full window)

Open the dashboard in the browser.

(SCREENSHOT: Chrome showing the dashboard rendered, with a search input — full window)

Open the React DevTools tab, switch to the Profiler sub-tab, hit Record, and type one character into the search input. Stop recording.

(SCREENSHOT: React DevTools Profiler tab — a flame graph from typing one character, many components highlighted yellow — full window)

Many components rendered. Some shouldn't have. That's the chapter, compressed.

The three categories of mistake this chapter fixes:

• Effects that shouldn't exist. Most useEffect code on Stack Overflow is solving a problem that vanishes when you delete the effect.
• Memoisation by superstition. useMemo and useCallback wrap things that didn't need wrapping; the profiler shows it.
• Server data treated as client data. Fetched data goes into useState, gets stale, and someone files a bug.

Pace. Most units are 14 to 18 minutes. The TanStack Query unit is 22 minutes — that's the one to slow down for.

The lint rule reminder. Every time you want to disable react-hooks/exhaustive-deps, that's a signal to stop and re-read 11.2. The rule exists for the bug you're about to hide.

Terms you'll meet first here.

• Effect — code that runs after a component renders, because the component touched something outside React. Full treatment in 11.1.
• Server state — data that lives on a server, that other users can change, that this app fetched. Full treatment in 11.11.
• Client state — data that only this user's browser knows about: a dropdown's open/closed flag, a draft form, the current tab. Full treatment in 11.11.
• Lint rule — an automatic check from ESLint that flags suspicious code. You met ESLint in Ch 9.

4. What you should be seeing

Three pictures in your head:

1. One unit. Same six beats as every other chapter.
2. One chapter. Fifteen units, then one assignment that gates Ch 12.
3. The three categories. Effects that shouldn't exist, memoisation by superstition, server data as client data. You can name them without looking back.

If you can list those three things, you're done with this unit.

5. Common stumbles

• You skip this orientation thinking it's filler. The three named categories only appear together here. The rest of the chapter assumes them.
• You open the broken dashboard and try to fix it before doing the units. The units exist because the bugs aren't obvious without them. Resist.
• You try to read the whole chapter in one sitting. Don't. Two units a day for a week beats fourteen units in one weekend.

6. You should know