Czym jest stan pochodny i dlaczego należy unikać jego duplikowania?

Question

Accepted Answer

**Stan pochodny** to dowolna wartość, którą możesz **obliczyć na podstawie istniejącego stanu** zamiast przechowywać oddzielnie. Zasada: jeśli możesz ją obliczyć, nie przechowuj jej — wyprowadź ją przy każdym renderowaniu. Przechowywanie wartości, które można wyprowadzić, grozi tym, że mogą się rozjechać.

## Antywzorzec: przechowywanie tego, co możesz obliczyć

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

Teraz `total` to druga kopia informacji już zawartej w `items`. Każda zmiana `items` musi *również* zaktualizować `total`, a w momencie, gdy pominiesz jedną zmianę (usunięcie, zmiana ilości), rozbiegają się i interfejs użytkownika pokazuje złą sumę.

## Rozwiązanie: wyprowadź to przy renderowaniu

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

Gdy `total` jest wyprowadzony, nie ma ничего dodatkowego do synchronizacji — zmień `items` a suma jest zawsze prawidłowa.

## Memoizuj tylko jeśli obliczenia są kosztowne

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

Dla ciężkich wyprowadzeń (duże filtry/sortowania), `useMemo`/`computed`/selektory buforują wynik, aby był przeliczany tylko gdy zależności się zmienią — ale to nadal jest *wyprowadzone*, nie przechowywane jako niezależny stan.

## Typowe wartości pochodne

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

## Dlaczego to ważne

Nie duplikowanie stanu pochodnego to bezpośrednie zastosowanie zasady pojedynczego źródła prawdy — eliminuje całą klasę błędów, w których kopie się rozbiegają.

Zasada "wyprowadź, nie przechowuj" utrzymuje twój stan minimalny i twój interfejs użytkownika konsekwentny z konstrukcji.

Rozpoznawanie tego, co można wyprowadzić (i sięganie po `useMemo`/computed/selektory tylko dla wydajności, nigdy aby stworzyć drugie źródło prawdy) to cecha czystego, odpornego na błędy projektowania stanu.