The summary.
DESCRIBE THE INTERFACE FOR A GIVEN STATE, AND KEEP STATE MINIMAL
Never store values derivable from other state — the copies diverge. Compute them during rendering instead.
UPDATING STATE SCHEDULES A RENDER; IT DOES NOT CHANGE THE VALUE IMMEDIATELY
Reading it straight afterwards gives the old value, and several updates in one event operate on a stale value unless you use the function form.
Never mutate state — React compares references, so a mutated object appears unchanged.
EFFECTS ARE FOR SYNCHRONISING WITH THINGS OUTSIDE REACT
Not for transforming data, responding to events, or computing values. That misuse causes extra renders and subtle bugs.
Always clean up: listeners, timers and requests.
USE STABLE KEYS FROM YOUR DATA, NEVER THE ARRAY INDEX
Where a list can reorder, index keys attach state to the wrong item and inputs lose their values.
MEASURE BEFORE OPTIMISING
Memoisation has its own cost, and is defeated by new objects and functions created during render.
ORGANISE BY FEATURE, NOT BY FILE TYPE
Files that change together should sit together.
TEST BY ROLE AND ACCESSIBLE NAME
It resists refactors, and it surfaces accessibility problems at the same time.
