React
How React actually renders, keeps state, syncs effects and handles async UI. Each lesson starts from a small program you can predict, then walks through why it behaves that way.
10 lessons
Rendering model
- 1Render and commitRendering is React calling your components to compute a tree. Committing is the only step that touches the DOM, and it applies only differences.
- 2useState: hook slots, snapshots and batchingA render reads a fixed snapshot of state; a setter queues a change for the next render, and it never edits the current one.
- 3Reconciliation, identity and keysReact pairs each new child with an old one by key, or by position without a key; state stays with the paired old child.
Effects and closures
- 4Effects as synchronizationAn effect keeps a component in sync with something outside React; dependencies say when to re-sync, and cleanup undoes the previous sync.
- 5Stale closures, refs and useEffectEventAn effect's callback keeps the values of the render that set it up; fresh values cost a new subscription or a non-reactive read.
Sharing state and performance
- 6Context vs external storesContext re-renders every reader when its value changes; an external store read with selectors re-renders only components whose selected value changed.
- 7Memoization and React CompilerMemoization compares identity, not content, and one fresh object in a dependency list defeats the whole chain below it.
Async UI
- 8Suspense and error boundaries: what waits and what fails togetherBoundaries decide what waits and what fails together: the closest one above swaps its whole subtree for a fallback.
- 9Transitions and concurrent renderingA Transition lets urgent input commit first and redoes stale work; it moves rendering out of the way and never makes a render faster.
- 10Forms, Actions and optimistic UIA form action runs as a Transition; pending flags drive the button, and an optimistic value lives only while the Action runs.