ReactIntermediate~5h

React: Effects & Data

Say when it runs, exactly

Every question in this project has one right answer. When the body runs relative to the screen updating, how many times it runs in each build, what the cleanup is holding when it fires, and why one array makes an effect freeze and another makes it spin — on questions generated fresh that never run out.

Start this project See the modules

Modules: 6
Drills: 12
Build steps: 2
Time: ~5h

Walk out able to

Order the lines of a commit, count an effect’s runs in either build, and write a fetch that cannot show a stale result — without reconstructing the rules first.

What you work on

When it runs

Commit, paint, effect — and the counts in both builds.

Cleanup, in order

What tears down, when, and the teardown that undoes nothing.

The dependency array

Stale and looping are the same question, from two ends.

Refs, context, data

The box React ignores, and the fetch that loses a race.

The pitch

What you practise, and what you leave with

A search box whose requests genuinely race and whose screen can only ever show the query that is actually in the field.

You will practise

Order the lines of one commit
Count the runs, in either build
List what belongs in the array
Work out which response wins

Afterwards you can

Place an effect in the commit, cold
Spot the teardown that removes nothing
Read the value a stale effect still sees
Write a fetch that cannot go stale

Modules

6 modules, 32 items

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

1
When an effect runs
~48 min
Place an effect in the commit, and count its runs in development and production.
- LessonWhy effects have an order5 min
- LessonThe four passes of one update7 min
- LessonParent first, then child first6 min
- LessonThe extra run in development6 min
- DrillOrder the lines of one commit12 min
- DrillCount how many times the body runs12 min
2
Setup, cleanup, setup
~42 min
Say what tears down, when, and with which values — and find the effect that never does.
- LessonWhich room does it leave?6 min
- LessonWhat a teardown has to undo6 min
- LessonThe teardown that removes nothing6 min
- DrillSay what the console shows11 min
- DrillFind the effect that leaks13 min
3
The dependency array
~1h
List what belongs, read the value a stale effect sees, and say whether one will loop.
- LessonTwo questions for every value8 min
- LessonToo few: still reading yesterday7 min
- LessonToo many: never the same twice7 min
- DrillList the dependencies12 min
- DrillRead the value it still sees13 min
- DrillSay whether it loops, and why12 min
- DrillSpot the broken effect12 min
4
Refs, and what React ignores
~34 min
Choose between a ref and state, and keep a changing callback out of an array on purpose.
- LessonA box React does not watch9 min
- LessonRead it without restarting for it6 min
- Build stepWatch a ref refuse to re-render10 min
- DrillRef, state, or neither9 min
5
Context, as an effect input
~25 min
Say whether a provider changing re-runs a consumer’s effect, and what decided it.
- LessonContext is a dependency7 min
- LessonTwo fixes, and one of them is yours6 min
- DrillDoes the consumer re-run?12 min
6
Data, and the effect that races
~1h
Write a fetch that cannot show a stale result, and decide when not to write one at all.
- LessonThe fetch that races6 min
- LessonThe guard is a cleanup7 min
- LessonWhat an abort adds, and what is left7 min
- Build stepRace it on purpose, and watch it lose13 min
- DrillWork out which response wins12 min
- DrillDoes this need an effect at all?12 min
- LessonMake a stale result impossible22 min