Izvedeno stanje je bilo koja vrijednost koju možete izračunati iz postojećeg stanja umjesto da je posebno pohranite. Načelo: ako je možete izračunati, nemojte je pohraniti — izvedite je pri svakom renderiranju. Pohrana izvedbenih vrijednosti poziva ih da budu izvan sinkronizacije.
() {
[items, setItems] = ([]);
[total, setTotal] = ();
() {
([...items, item]);
(total + item.);
}
}
Sada je total druga kopija informacija koja već postoji u items. Svaka promjena items mora također ažurirati total, a čim nešto propustite (uklanjanje, promjena količine), oni se ne slažu i korisničko sučelje prikazuje pogrešan ukupno.
// ✅ 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
}
}
S total izvedenim, nema ništa dodatno što treba zadržati u sinkronizaciji — promijenite items i ukupno je uvijek ispravno.
const sortedFiltered = useMemo(
() => items.filter(i => i.active).sort(compareFn), // expensive derivation
[items] // recompute only when items change
);
Za teške izvedbene podatke (veliki filteri/sortiranja), useMemo/computed/selectors keširaju rezultat tako da se ponovno izračunava samo kada se ovisnosti promijene — ali je to i dalje izvedeno, a ne pohranjeno kao nezavisno stanje.
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
Ne dupliciranje izvedenog stanja je izravna primjena jednostavnog izvora istine — eliminira cijelu klasu greške gdje se kopije razilaze.
Pravilo "izvedite, nemojte pohraniti" čuva vaše stanje minimalnim i vaše korisničko sučelje doslednim po konstrukciji.
Prepoznavanje što je izvedljivo (i dosezanje useMemo/computed/selectors samo za performanse, nikada za stvaranje drugog izvora istine) je obilježje čistog, otpornog na greške stanja dizajna.