React Lab
Department of Reconciliation Studies
We attach instruments to a component tree, change one piece of state, and watch how far the tremor travels. Most performance complaints turn out to be a tree shape problem.
Experiments
- reactDEVELOPER
Why did this component render?
Nothing it displays changed. It rendered anyway. Four causes, and only one of them is a bug.
react10 min - reactENGINEER
Reconciliation investigation
Delete the first row of a list and the wrong checkbox stays ticked. The list is correct. The keys are not.
react9 min - reactDEVELOPER
State placement experiment
The same feature, built three times. Only the location of one `useState` changes. The performance profile does not survive it.
react8 min
Dossiers
Myths filed against this lab
- ClaimIT DEPENDS
“React is slow.”
React's own work is rarely the bottleneck. The tree shape, the amount of JavaScript shipped, and what happens during hydration usually are.
ENGINEERreact - ClaimBUSTED
“More memoization = more performance.”
Every memo has a cost: the comparison, the retained references, and the dependency array you now have to keep correct. Applied blindly, it is a net loss.
ENGINEERreact - ClaimBUSTED
“useEffect is for everything.”
An effect synchronises your component with an external system. If there is no external system, you probably do not need one.
DEVELOPERreact