Frequent errors.
USING EFFECTS FOR EVERYTHING
Transforming data, responding to events, or computing values that belong in render.
MISSING OR INCORRECT DEPENDENCIES
Producing stale values or infinite loops.
USING THE ARRAY INDEX AS A KEY
Where lists reorder or change.
STORING DERIVED VALUES IN STATE
Producing copies that diverge from their source.
CALLING A FUNCTION INSTEAD OF PASSING IT
So it runs on render rather than on interaction.
READING STATE STRAIGHT AFTER SETTING IT
Updates are scheduled, not immediate.
MUTATING STATE DIRECTLY
React compares references, so a mutated object appears unchanged.
MEMOISING EVERYTHING
Adding complexity with no measured benefit.
PROP DRILLING THROUGH MANY LAYERS
Where the state belongs elsewhere.
FETCHING IN EFFECTS WITHOUT CANCELLATION
Producing responses applied after a component has gone.
REBUILDING NATIVE ELEMENTS
Losing keyboard handling and accessibility.
WHAT PREVENTS MOST OF THESE
Understanding when rendering is triggered, and keeping state minimal.
