ਡੈਰਾਇਵਡ ਸਟੇਟ ਕੋਈ ਵੀ ਮੁੱਲ ਹੈ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਮੌਜੂਦਾ ਸਟੇਟ ਤੋਂ ਕੰਪਿਊਟ ਕਰ ਸਕੋ ਬਜਾਏ ਇਸ ਨੂੰ ਵੱਖਰੇ ਤੌਰ ਤੇ ਸਟੋਰ ਕਰਨ ਦੇ। ਸਿਧਾਂਤ: ਜੇ ਤੁਸੀਂ ਇਸ ਦੀ ਗਣਨਾ ਕਰ ਸਕਦੇ ਹੋ, ਤਾਂ ਇਸ ਨੂੰ ਸਟੋਰ ਨਾ ਕਰੋ — ਹਰ ਰੈਂਡਰ 'ਤੇ ਇਸ ਨੂੰ ਡੈਰਾਇਵ ਕਰੋ। ਡੈਰਾਇਵਲ ਮੁੱਲਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨਾ ਉਨ੍ਹਾਂ ਨੂੰ ਸਿੰਕ ਤੋਂ ਬਾਹਰ ਹੋਣ ਦਾ ਸੱਦਾ ਦਿੰਦਾ ਹੈ।
() {
[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 ਦਾ ਸਿੱਧਾ ਉਪਯੋਗ ਹੈ — ਇਹ ਪੂਰਾ ਬਗ ਕਲਾਸ ਖਤਮ ਕਰਦਾ ਹੈ ਜਿੱਥੇ ਕਾਪੀਆਂ ਵੱਖ ਹੋ ਜਾਣ।
ਨਿਯਮ "ਡੈਰਾਇਵ ਕਰੋ, ਸਟੋਰ ਨਾ ਕਰੋ" ਤੁਹਾਡੀ ਸਟੇਟ ਨੂੰ ਨਿਮਿਨਲ ਅਤੇ ਤੁਹਾਡੇ UI ਨੂੰ ਪਰਿਭਾਸ਼ਾ ਦੇ ਦੁਆਰਾ ਕੁਨਸਿਸਟੈਂਟ ਰੱਖਦਾ ਹੈ।
ਪਛਾਣਨਾ ਕਿ ਕੀ ਡੈਰਾਇਵਲ ਹੈ (ਅਤੇ ਸਿਰਫ਼ ਪਰਫੋਰਮੇਂਸ ਲਈ ਕਦੇ useMemo/computed/selectors ਤੱਕ ਪਹੁੰਚ ਨਾ ਕਰਨਾ, ਸਦਾ ਦੂਜਾ ਸਰੋਤ ਆਫ ਟ੍ਰੂਥ ਬਣਾਉਣ ਲਈ ਨਹੀਂ) ਸਾਫ, ਬਗ-ਰੈਜ਼ਿਸਟੈਂਟ ਸਟੇਟ ਡਿਜ਼ਾਈਨ ਦਾ ਹਾਲ ਹੈ।