派生状態とは何か、そしてなぜそれを重複させるべきではないのか？

Question

Accepted Answer

**派生状態**は、別々に保存するのではなく**既存の状態から計算できる**あらゆる値です。原則：計算できるなら、保存しないでください。毎回のレンダリングで導出してください。導出可能な値を保存すると、同期がずれる可能性があります。

## アンチパターン：計算できるものを保存する

```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 🐛
  }
}
```

これで `total` は `items` に既に含まれている情報の2番目のコピーになります。`items` への変更のたびに `total` も更新する必要があり、1つ見逃すと（削除または数量変更）、両者が一致せず、UIに間違った合計が表示されます。

## 修正：レンダリング時に導出する

```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
  }
}
```

`total` が派生しているので、同期を保つ必要のある追加情報はありません。`items` を変更すれば、合計は常に正しくなります。

## 計算が高コストな場合のみメモ化する

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

大規模なフィルタリング/ソート（重い派生）の場合、`useMemo`/`computed`/selectors は結果をキャッシュするため、依存関係が変更されたときのみ再計算されます。しかし、それでも*派生*であり、独立した状態として保存されません。

## 一般的な派生値

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

## なぜ重要なのか

派生状態を重複させないことは、single-source-of-truth の直接的な応用です。コピーが乖離するバグのクラス全体を排除します。

「保存するのではなく、導出する」というルールは、状態を最小限に保ち、UI の一貫性を設計によって保証します。

何が導出可能か（また、パフォーマンスのためだけに `useMemo`/computed/selectors を使用し、2番目の信頼できる情報源を作成するためには決して使用しない）を認識することは、クリーンでバグに強い状態設計の特徴です。