Practice · State
derived state
If you can compute it, don't store it
Every useState is an independent source of truth. When a value can be computed from other state or props, storing it separately creates two truths that will eventually fall out of sync.
The problem
Storing in state something that already exists in other state (or props) means you have to keep them in sync manually — with useEffect or multiple setState calls per event. Any path where you forget to update one introduces a silent bug.
The solution
Compute the derived value directly during render. It's a plain variable, not a useState. If the calculation is expensive and the list is very large, wrap it in useMemo — but only with real evidence of slowness, not preemptively.
Common pitfalls
- 01Deriving with useEffect introduces an extra render: the old state renders first, then the effect updates the derived value and triggers another render.
- 02Not everything that looks derived actually is: if the user can edit it independently of the source, it needs its own state.
- 03useMemo is only for expensive calculations — filtering a 20-item array doesn't justify it.
Was this helpful?
Sign in to give feedback