ఉత్పన్న స్థితి అంటే ఏమిటి మరియు దానిని నకిలీ చేయడం ఎందుకు తప్పుకోవాలి?

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`ను మార్చండి మరియు మొత్తం ఎల్లప్పుడూ సరైనది.

## గణన ఖరీదైనది అయితే మాత్రమే Memoize చేయండి

```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?"
```

## ఇది ఎందుకు ముఖ్యమైనది

ఉత్పన్న స్థితిని నకిలీ చేయకపోవడం అనేది single-source-of-truth యొక్క సరాসరి అనువర్తనం — కాపీలు వేరుగా పడిపోయే బగ్ క్లాస్‌ను పూర్తిగా తొలగిస్తుంది.

"ఉత్పన్నం, నిల్వ చేయవద్దు" నియమం మీ స్థితిని కనిష్ఠంగా ఉంచుతుంది మరియు మీ UI నిర్మాణం ద్వారా సামంజస్యపూర్వకంగా ఉంచుతుంది.

ఉత్పన్నం చేయగల వాటిని గుర్తించడం (మరియు `useMemo`/computed/selectors కోసం పనితీరు కోసం మాత్రమే సమీపించడం, సత్య యొక్క రెండవ మూలం సృష్టించడానికి కాదు) స్వచ్ఛమైన, బగ్-నిరోధక స్థితి రూపకల్పన యొక్క లక్షణం.