ReactJavaScriptIntermediate~4h

React: Rendering & State

The count, and what it tells you

Most React advice is judgement. One question is not: how many times does this component render, for this click? It has an exact answer, and working it out finds the bug — the row that lost its half-typed note, the value stored that should have been computed, the memo that was never stopping anything.

Start this project See the modules

Modules: 5
Drills: 10
Build steps: 2
Time: ~4h

Walk out able to

Put an exact number on any component in a tree you have never seen, say which rule produced it, and repair the tree when the number is wrong.

What you learn to answer

What makes it render

The three triggers, and the four that never are.

Snapshots and batching

What a handler reads, and how a queue folds.

The exact render count

A number for any component, for any click.

Keys and where state lives

Which component keeps it, and who should own it.

The pitch

What you practise, and what you leave with

A render audit: a tree you did not write, counted before and after, with four defects found by reading and a repair for each.

You will practise

Render triggers, and the four impostors
Snapshots, update queues and batching
Counting renders, and reading a memo
Keys, identity, lifting and derived state

Afterwards you can

Count any component, for any interaction
Say why a memo boundary is not holding
Reset or keep state deliberately with a key
Tell a stored value from a computed one

Modules

5 modules, 23 items

Lessons explain one idea. Drills repeat it until it sticks. Build steps make something that exists afterwards.

1
What makes React render
~29 min
Name every event that makes React call a component again — and the ones that never do.
- LessonSay what a render actually is9 min
- LessonName the three triggers9 min
- DrillName what makes it render again11 min
2
State is a snapshot
~48 min
Say what a handler reads, and fold a queue of updates to the value that lands.
- LessonRead state as the render saw it7 min
- LessonFold a queue of updates8 min
- DrillRun the handler in your head11 min
- DrillUpdate a list without mutating it10 min
- DrillSpot the line React will not take12 min
3
How many times does this render
~1h
Put an exact number on any component in a tree, for any interaction.
- LessonCount a render by hand9 min
- LessonTwo numbers that are not the rules7 min
- DrillCount the renders exactly18 min
- DrillSay whether memo stops it10 min
- Build stepBuild a lab and watch it render10 min
- Build stepTake StrictMode out, count again8 min
4
Which component keeps its state
~39 min
Say whether state survives a re-render, and reset or keep it deliberately with a key.
- LessonSay where a component keeps state7 min
- LessonReset or keep state with a key9 min
- DrillSay whether state survives a swap12 min
- DrillFollow a row through a list11 min
5
Where a value belongs
~56 min
Put state where both components can see it, and tell a stored value from a computed one.
- LessonLift state to where both can see it13 min
- DrillPlace the state in the right component10 min
- DrillDecide: stored or computed10 min
- LessonCount a tree you did not write10 min
- LessonFind four defects and repair them13 min