Derived state کیا ہے اور اسے duplicate کرنے سے کیوں بچنا چاہیے؟

Question

Accepted Answer

**Derived state** کوئی بھی value ہے جو آپ **موجودہ state سے compute کر سکتے ہیں** بہ جائے الگ سے store کرنے کے۔ اصول: اگر آپ اسے calculate کر سکتے ہیں، تو اسے store نہ کریں — ہر render پر اسے derive کریں۔ Derivable values کو store کرنا انہیں غیر مطابقت میں آنے کی دعوت دیتا ہے۔

## Anti-pattern: اسے store کرنا جو آپ compute کر سکتے ہیں

```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` ایک دوسری copy ہے information کی جو پہلے سے `items` میں ہے۔ `items` میں ہر تبدیلی کو *بھی* `total` کو update کرنا چاہیے، اور جس لمحے آپ ایک کو miss کریں (ایک remove، ایک quantity change)، وہ اختلاف رکھتے ہیں اور 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 میں رکھنے کے لیے کچھ بھی extra نہیں ہے — `items` کو change کریں اور total ہمیشہ صحیح ہے۔

## صرف اگر computation مہنگا ہو تو 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 تبدیل ہونے پر دوبارہ compute ہو — لیکن یہ ابھی بھی *derived* ہے، independent state کے طور پر store نہیں۔

## عام derived values

```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 کو ختم کرتا ہے جہاں copies الگ ہو جاتی ہیں۔

قاعدہ "derive کریں، store نہ کریں" آپ کے state کو minimal رکھتا ہے اور آپ کے UI کو consistent رکھتا ہے۔

یہ پہچاننا کہ کیا derivable ہے (اور `useMemo`/computed/selectors تک رسائی صرف performance کے لیے، کبھی دوسرا source of truth بنانے کے لیے نہیں) clean، bug-resistant state design کی نشانی ہے۔