Išvestoji būsena yra bet kokia reikšmė, kurią galite apskaičiuoti iš esamos būsenos užuot ją saugojus atskirai. Principas: jei galite ją apskaičiuoti, jos nesaugokite — išveskite kiekvienoje render'oje. Saugant išvestinas reikšmes, jos gali iš sinchronizacijos.
() {
[items, setItems] = ([]);
[total, setTotal] = ();
() {
([...items, item]);
(total + item.);
}
}
Dabar total yra antra informacijos kopija, kuri jau yra items. Kiekvieną kartą keičiant items, reikia taip pat atnaujinti total, o jei nepastebisite vieno pakeitimo (pašalinimas, kiekio pokytis), jie nesutaps ir sąsaja parodys neteisingą sumą.
// ✅ 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
}
}
Su total išvesta, nėra nieko papildomo, ką reikėtų sinchronizuoti — pakeiskite items ir suma visada bus teisinga.
const sortedFiltered = useMemo(
() => items.filter(i => i.active).sort(compareFn), // expensive derivation
[items] // recompute only when items change
);
Sunkiems išvedimams (dideli filtrai/rūšiavimai), useMemo/computed/selectors greitina rezultatą, kad jis būtų perskaičiuojamas tik keitus priklausomybes — bet tai vis dar išvesta, o ne saugoma kaip nepriklausoma būsena.
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
Neribliavus išvestosios būsenos yra tiesioginis single-source-of-truth taikymas — tai panaikina visą klaidų klasę, kurioje kopijos išsiskiria.
Taisyklė „išveskite, nesaugokite