What is derived state and why avoid duplicating it?

Question

Accepted Answer

**Derived state** is any value you can **compute from existing state** rather than store separately. The principle: if you can calculate it, don't store it — derive it on each render. Storing derivable values invites them to get out of sync.

## The anti-pattern: storing what you can compute

```jsx
// ❌ storing a derived value as separate state
function Cart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0); // DUPLICATE — derivable from items

function addItem(item) {
    setItems([...items, item]);
    setTotal(total + item.price); // must remember to update total too — easy to forget 🐛
  }
}
```

Now `total` is a second copy of information already in `items`. Every change to `items` must *also* update `total`, and the moment you miss one (a remove, a quantity change), they disagree and the UI shows the wrong total.

## The fix: derive it on render

```jsx
// ✅ compute total from items — always correct, never out of sync
function Cart() {
  const [items, setItems] = useState([]);
  const total = items.reduce((sum, i) => sum + i.price, 0); // derived each render

function addItem(item) {
    setItems([...items, item]); // ONE update; total recomputes automatically
  }
}
```

With `total` derived, there's nothing extra to keep in sync — change `items` and the total is always right.

## Memoize only if the computation is expensive

```jsx
const sortedFiltered = useMemo(
  () => items.filter(i => i.active).sort(compareFn), // expensive derivation
  [items]                                            // recompute only when items change
);
```

For heavy derivations (large filters/sorts), `useMemo`/`computed`/selectors cache the result so it only recomputes when dependencies change — but it's still *derived*, not stored as independent state.

## Common derived values

```text
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
```

## Why it matters

Not duplicating derived state is a direct application of single-source-of-truth — it eliminates an entire bug class where copies drift apart.

The rule "derive, don't store" keeps your state minimal and your UI consistent by construction.

Recognizing what is derivable (and reaching for `useMemo`/computed/selectors only for performance, never to create a second source of truth) is a hallmark of clean, bug-resistant state design.