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ć.
() {
[items, setItems] = ([]);
[total, setTotal] = ();
() {
([...items, item]);
(total + item.);
}
}
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ę.
// ✅ 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.
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.
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
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.
Biblioteka pytań rekrutacyjnych IT ze szczegółowymi odpowiedziami — od Juniora do Seniora.
Wesprzyj