Türetilmiş durum, ayrı ayrı depolamak yerine mevcut durumdan hesaplayabileceğiniz herhangi bir değerdir. İlke: hesaplayabiliyorsanız, depolamayın — her render'da türetin. Türetilebilir değerleri depolamak onları senkronizasyondan çıkmaya davet eder.
() {
[items, setItems] = ([]);
[total, setTotal] = ();
() {
([...items, item]);
(total + item.);
}
}
Şimdi total, items içinde zaten bulunan bilgilerin ikinci bir kopyası. items'daki her değişiklik aynı zamanda total güncellemeli ve bir tanesini kaçırdığınız anda (silme, miktar değişikliği) anlaşmazlığa düşer ve UI yanlış toplamı gösterir.
// ✅ 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 türetilmiş olduğunda, senkronize edilecek ekstra bir şey yoktur — items değiştirin ve toplam her zaman doğru olur.
const sortedFiltered = useMemo(
() => items.filter(i => i.active).sort(compareFn), // expensive derivation
[items] // recompute only when items change
);
Ağır türetmeler (büyük filtreler/sıralamalar) için useMemo/computed/selectors sonucu önbelleğe alır, böylece bağımlılıklar değiştiğinde yeniden hesaplanır — ancak yine de türetilmiştir, bağımsız durum olarak depolanmamıştır.
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
Türetilmiş durumu çoğaltmamak, tek-gerçek-kaynağın doğrudan uygulanmasıdır — kopiyaların birbirinden ayrılmasından kaynaklanan tüm bir hata sınıfını ortadan kaldırır.
"Türet, depolama" kuralı durumunuzu minimum ve kullanıcı arayüzünüzü yapı tarafından tutarlı tutar.
Neyin türetilebilir olduğunu bilmek (ve useMemo/computed/selectors'a yalnızca performans için, asla ikinci bir gerçek kaynağı oluşturmak için ulaşmak) temiz, hatasız durum tasarımının bir alameti farikasıdır.