Derived state

Derived state is computed from canonical data at read time (or memoized when expensive). If you can calculate it, storing a second copy invites drift when one side updates and the other does not.

					const items = [{ id: 1, done: true }, { id: 2, done: false }];
// Derived — do not store completedCount separately
const completedCount = items.filter((i) => i.done).length;
				

Use memoization (`useMemo`, reselect, MobX computed) when derivation is costly and inputs are stable. Selectors are the Redux pattern; computed values are the MobX pattern — same idea, different wiring.

On interviews: spot duplicated filters, counts, or sorted lists stored alongside source arrays.

Common pitfalls: syncing derived fields in reducers, useEffect chains that copy props to state, and selectors that mutate inputs.

The trade-off is slightly more read work versus guaranteed consistency.

Checklist:

• One canonical source per fact.
• Derive at read or memoize projections.
• Invalidate memo when inputs change.
• Never write derived values back as truth.