derived state भनेको के हो र यसलाई duplicate गरेर किन बेवास्ता गर्नु पर्छ?

Question

Accepted Answer

**Derived state** भनेको कुनै पनि मान हो जुन तपाईले **पहिले नै भएको state बाट गणना गर्न सक्नु हुन्छ** बरु अलग गरी store गर्नुको सट्टा। सिद्धान्त: यदि तपाईले यो गणना गर्न सक्नु हुन्छ, यसलाई store गर्नु नहोस् — हरेक render मा यसलाई derive गर्नुहोस्। Derivable मानहरूलाई store गर्नु मतलब तिनीहरूलाई sync बाहिर हुने आमन्त्रण गर्नु हो।

## Anti-pattern: तपाईले गणना गर्न सक्ने कुरा store गर्नु

```jsx
// ❌ storing a derived value as separate state
function Cart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0); // DUPLICATE — derivable from items

function addItem(item) {
    setItems([...items, item]);
    setTotal(total + item.price); // must remember to update total too — easy to forget 🐛
  }
}
```

अब `total` भनेको `items` मा पहिले नै भएको जानकारीको दोस्रो प्रतिलिपि हो। `items` को हरेक परिवर्तनले `total` पनि update गर्नु *पनि* गरेको हुनु पर्छ, र जसको खेर तपाईले एकलाई गुमाउनु हुन्छ (remove, quantity परिवर्तन), तिनीहरू असहमत हुन्छन् र UI गलत total देखाउँछ।

## समाधान: render मा यसलाई derive गर्नुहोस्

```jsx
// ✅ 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` derived सँग, sync मा राख्न कुनै अतिरिक्त कुरा छैन — `items` परिवर्तन गर्नुहोस् र total सधैं सही छ।

## यदि गणना महँगो छ भने मात्र Memoize गर्नुहोस्

```jsx
const sortedFiltered = useMemo(
  () => items.filter(i => i.active).sort(compareFn), // expensive derivation
  [items]                                            // recompute only when items change
);
```

भारी derivations को लागि (ठूलो filters/sorts), `useMemo`/`computed`/selectors ले नतिजा cache गर्छ ताकि यो केवल dependencies परिवर्तन हुँदा recompute हुन्छ — तर यो अझै पनि *derived* हो, स्वतन्त्र state को रूप मा store गरिएको होइन।

## साधारण derived मानहरू

```text
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
```

## किन यो महत्त्वपूर्ण छ

Derived state लाई duplicate नगर्नु भनेको single-source-of-truth को सीधा अनुप्रयोग हो — यो एक पूरो bug class लाई हटाउँछ जहाँ प्रतिलिपिहरू अलग हुन्छन्।

"derive गर्नुहोस्, store गर्नु नहोस्" को नियमले तपाईको state minimal राख्छ र तपाईको UI consistent रखिन्छ निर्माणद्वारा।

के derivable हो भनेर पहिचान गर्नु (र `useMemo`/computed/selectors मा पहुँच गर्नु केवल performance को लागि, कहिले पनि दोस्रो source of truth बनाउन को लागि होइन) स्वच्छ, bug-resistant state design को एक विशेषता हो।