વ્યુત્પન્ન અવસ્થા શું છે અને તેને નકલ કરવાનું શા માટે ટાળવું જોઈએ?

Question

Accepted Answer

**વ્યુત્પન્ન અવસ્થા** કોઈપણ મૂલ્ય છે જે તમે **હાલની અવસ્થા પરથી ગણતરી કરી શકો છો** તેના બદલે તેને અલગથી સંગ્રહ કરવાની જરૂરિયાત નથી. સિદ્ધાંત: જો તમે તેની ગણતરી કરી શકો છો, તો તેને સંગ્રહ કરશો નહીં — દરેક રેન્ડર પર તેને વ્યુત્પન્ન કરો. વ્યુત્પન્ન કરી શકાય તેવા મૂલ્યો સંગ્રહ કરવાથી તેઓ સિંક્રોનાઇজેશન બહાર પડવાની આમંત્રણ આપે છે.

## અયોગ્ય પેટર્ન: જે તમે ગણતરી કરી શકો તેને સંગ્રહ કરવું

```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` ને *પણ* અપડેટ કરવું જોઈએ, અને તે ક્ષણે તમે એક ભૂલ કરો (એક દૂર કરવું, એક જથ્થામાં ફેરફાર), તેઓ અસંમત થાય છે અને UI ખોટો કુલ દર્શાવે છે.

## સુધાર: તેને રેન્ડર પર વ્યુત્પન્ન કરો

```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` વ્યુત્પન્ન સાથે, સિંક્રોનાઇજ રાખવા માટે કોઈ વધારાની વસ્તુ નથી — `items` બદલો અને કુલ હંમેશા સાચું છે.

## જો ગણતરી ખર્ચાળ હોય તો સમર્થન કરો

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

ભારે વ્યુત્પન્ન (મોટા ફિલ્ટર/સૉર્ટ્સ) માટે, `useMemo`/`computed`/selectors પરિણામને ક્યાશ કરે છે જેથી તે માત્ર જ્યારે નિર્ભરતા બદલાય ત્યારે જ ફરી ગણતરી થાય — પરંતુ તે હજી પણ *વ્યુત્પન્ન* છે, સ્વતંત્ર અવસ્થા તરીકે સંગ્રહિત નથી.

## સામાન્ય વ્યુત્પન્ન મૂલ્યો

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

## તે શા માટે મહત્વપૂર્ણ છે

વ્યુત્પન્ન અવસ્થાને નકલ ન કરવું એ એક એકમાત્ર સત્ય શોધ નો સીધો ઉપયોગ છે — તે બધા બગ્સનો વર્ગ દૂર કરે છે જ્યાં નકલો અલગ થઈ જાય છે.

"વ્યુત્પન્ન કરો, સંગ્રહ કરશો નહીં" નિયમ તમારી અવસ્થા ન્યૂનતમ રાખે છે અને તમારી UI સુસંગત રાખે છે નિર્માણ દ્વારા.

જે વ્યુત્પન્ન કરી શકાય તે ઓળખવું (અને `useMemo`/computed/selectors માટે માત્ર કામગીરી માટે પહોંચવું, ક્યારેય બીજો સત્ય શોધ બનાવવા માટે નહીં) સ્વચ્છ, બગ-પ્રતિરોધક અવસ્થા ડિઝાઇનનું સીમાચિહ્ન છે.