წარმოებული მდგომარეობა არის ნებისმიერი მნიშვნელობა, რომელიც შეგიძლიათ გამოთვალოთ არსებული მდგომარეობიდან ცალკე შენახვის ნაცვლად. პრინციპი: თუ შეგიძლიათ მისი გამოთვლა, არ შეინახოთ — გამოიტანეთ ყოველი რენდერის დროს. წარმოებადი მნიშვნელობების შენახვა გამოწვევს მათ სინქრონიზაციის დაკარგვას.
() {
[items, setItems] = ([]);
[total, setTotal] = ();
() {
([...items, item]);
(total + item.);
}
}
ახლა total არის ორი ასლი ინფორმაციის, რომელიც უკვე items-ში არის. items-ის ყოველი ცვლილება ასევე უნდა აკეთებდეს total-ის განახლებას, და როდესაც თქვენ ერთი გამოტოვებთ (წაშლა, რაოდენობის ცვლილება), ისინი არ შეთანხმდებიან და UI აჩვენებს ხარვეზებულ ჯამს.
// ✅ 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-ის გამოტანილი ფორმით, არ არის დამატებითი რამე, რაც სინქრონიზირებული უნდა იყოს — შეცვალეთ items და ჯამი ყოველთვის სწორია.
const sortedFiltered = useMemo(
() => items.filter(i => i.active).sort(compareFn), // expensive derivation
[items] // recompute only when items change
);
მძიმე გამოტანისთვის (დიდი ფილტრები/დალაგებები), useMemo/computed/selectors კეშირებს შედეგს ისე, რომ მხოლოდ მაშინ გადაითვლება როდესაც დამოკიდებულებები იცვლება — მაგრამ ის ჯერ კიდევ გამოტანილია, არა დაგროვილი დამოუკიდებელი მდგომარეობის სახით.
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
წარმოებული მდგომარეობის დუბლირებისაგან თავის აცილება არის single-source-of-truth-ის პირდაპირი გამოყენება — აღმოფხვრის მთელ კატეგორიას ხარვეზების სადაც ასლები დაშორდებიან.
წესი "გამოიტანე, არ შეინახო" რაც შhedge თქვენს მდგომარეობას მინიმალური და თქვენი UI თანმიმდევრული კონსტრუქციაში.
რა არის გამოტანილი (და მიმართოთ useMemo/computed/selectors მხოლოდ პერფორმანსისთვის, არასოდეს მეორე სიმართის წყაროს შესაქმნელად) არის სუფთა, ხარვეზებისადმი წინააღმდეგი მდგომარეობის დიზაინის დამახასიათებელი.