Derived state: compute, don't store

Derived state: compute, don't store

A common beginner instinct is to create state for everything on screen. But if a value can be computed from existing state or props, it should not be state at all, just compute it during render:

function Cart({ items }) {
  // NOT state, plain consts computed on every render
  const subtotal = items.reduce((sum, it) => sum + it.price * it.qty, 0);
  const shipping = subtotal >= 100 ? 0 : 7;
  return <p>Total: {subtotal + shipping}</p>;
}

reduce is the array-folding tool from Advanced JavaScript. Every render recomputes these consts from the freshest items, so they can never be out of date.

Storing them in state instead would mean updating TWO things on every cart change, and forgetting is the sync bug from lesson 1-1 all over again, this time inside React. The rule of thumb: state is only for facts React cannot compute, everything else is derived.