Lesson 8 — Derived values

Compute, do not store

A derived value is something you can calculate from data you already have — a count, a total, a filtered list. Calculate it during render instead of keeping it in separate state. Then it can never get out of sync with the data it comes from.

const cart = [{ price: 2 }, { price: 5 }];
const total = cart.reduce((sum, i) => sum + i.price, 0); // 7
return <p>Total: {total}</p>;

Why it matters: duplicated state is one of the most common sources of "the numbers on screen disagree" bugs.