Comparison
Derived statevsSingle source of truth
Derived state
you stored the filtered list in state as well as the raw list, and now they need keeping in sync.
A value that can be computed from existing state and therefore should not be stored separately. Storing it turns one update into two and introduces an ordering bug the first time only one of them runs. Computing it during render is almost always cheap enough; when it genuinely is not, memoise the computation rather than storing the result.
Full entry →Single source of truth
the same value was stored in two places and they drifted apart, so the header and the sidebar disagreed.
The rule that each piece of state is owned in exactly one place and everything else reads it from there. Every duplicate is a synchronisation bug waiting for the update path that forgets one copy. The most common violation is copying a prop into state on mount, which quietly stops tracking the prop from then on.
Full entry →