useMemo మరియు useCallback ఎప్పుడు ఉపయోగించాలి మరియు అవి ఏ సమస్యను పరిష్కరిస్తాయి?

Question

Accepted Answer

రెండూ ప్రతిసారి పুনర్గణన చేయని/పునర్నిర్మించని విధంగా రెండర్‌ల్లో ఏదైనా కాష్‌ చేస్తాయి:
- **`useMemo`** **గణన చేసిన విలువను** కాష్‌ చేస్తుంది.
- **`useCallback`** **ఫంక్షన్ గుర్తింపును** కాష్‌ చేస్తుంది (ఇది `useMemo(() => fn, deps)`).

ఇవి (ఎ) ఖరీదైన కంటెంట్‌ను పునరావృత్తి చేయడం నుండి మరియు (బి) మెమోయిజ్‌ చేసిన పిల్లలు ఆధారపడే సూచన సమానతను విచ్ఛిన్నం చేయడం నుండి నిరోధించడానికి ఉన్నాయి.

```jsx
function Table({ rows, onSelect }) {
  // (a) expensive computation — recompute only when `rows` changes
  const sorted = useMemo(() => rows.slice().sort(byName), [rows]);

// (b) stable function identity — so a React.memo child doesn't re-render,
  //     and effects depending on it don't re-fire
  const handleSelect = useCallback(id => onSelect(id), [onSelect]);

return <Grid rows={sorted} onSelect={handleSelect} />;
}
```

## సూచన స్థిరత్వం ఎందుకు ముఖ్యమైనది

`useCallback` లేకుండా, `handleSelect` ప్రతిసారి రెండర్‌ కోసం సంపూర్ణ నতून ఫంక్షన్. A `React.memo(Grid)` "నూతన" prop ని చూసి ఏమైనా పున:రెండర్ చేస్తుంది, మెమోయిజేషన్‌ను ఓడించింది. ఒక మెమోయిజ్‌ చేసిన పిల్లకు పంపిన లేదా `useEffect` డిపెండెన్సీ శ్రేణిలో ఉపయోగించిన ఆబ్జెక్ట్ కోసం అదేవిధంగా.

## ట్రేడ్-ఆఫ్‌లు — వాటిని ఓవర్‌-ఉపయోగం చేయవద్దు

```jsx
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
```

- మెమోయిజేషన్ ఉచితం కాదు: ఇది మెమరీ అదనంగా **ప్రతిసారి** రెండర్‌ పై ఆధారపడటి పోలిక ఖర్చు చేస్తుంది.
- చెడు/లేని ఆధారపడటి శ్రేణి మీకు **పాతకాలపు విలువలను** ఇస్తుంది — అత్యంత సాధారణ బగ్.
- మీరు నిజమైన సమస్యను కొలిచినప్పుడు మాత్రమే మెమోయిజ్ చేయండి (ఖరీదైన గణన, లేదా మెమోయిజ్ చేసిన బిడ్డ చాలా ఎక్కువ రెండర్ చేస్తుంది). ప్రారంభిక `useMemo`/`useCallback` అన్నిచోటా శబ్దాన్ని జోడిస్తుంది మరియు నెమ్మదిగా కూడా ఉండవచ్చు. (React 19 యొక్క కంపైలర్ స్వయంచాలకంగా మెమోయిజ్ చేయగలదు, అవసరాన్ని తగ్గిస్తుంది.)