Derived State & Avoiding Extra Renders
Prefer derived values over duplicated state; memoize heavy computations; keep one source of truth to avoid extra renders.
What is derived state?
Derived state = values computed from existing state/props (e.g., fullName, totals, filters). Keep one source of truth to reduce bugs and re-renders.
Rules: derive vs store
- Derive if it can be recomputed from other data.
- Store only user input or server data you can’t compute.
- Memoize heavy derived values.
All lessons in this course
- Re-renders vs Commits: When to Optimize
- React.memo, useMemo, useCallback — In Practice
- Derived State & Avoiding Extra Renders