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` ஒவ்வொரு ரெண்டரிலும் புத்தியாக புதிய செயல்பாடு ஆகும். ஒரு `React.memo(Grid)` ஒரு "புதிய" prop ஐ பார்த்து எப்படியாவது மீண்டும் ரெண்டர் செய்கிறது, மெமோயிஸ்ஐச்ஞ் தோல்வியடையும். ஒரு மெமோயிஸ் செய்யப்பட்ட சிறுவருக்கு அனுப்பப்பட்ட அல்லது `useEffect` சார்பு தொகுப்பில் பயன்படுத்தப்பட்ட ஒரு பொருளையும் அதே போல.

## ट्रेড-অफ्स — அவற்றை அதிகமாகப் பயன்படுத்த வேண்டாம்

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

- மெமோயிஸ்ஐச்ஞ் இலவசம் அல்ல: இது நினைவகம் மற்றும் **ஒவ்வொரு** ரெண்டரிலும் சார்பு ஒப்பீட்டை செலவாக்கும்.
- தவறு/விடுக்கப்பட்ட சார்பு தொகுப்பு உங்களுக்கு **பழைய மதிப்புகளை** அளிக்கிறது — மிகவும் பொதுவான பிழை.
- நீங்கள் ஒரு உண்மையான சிக்கலை அளவிட்ட போது மட்டுமே மெமோயிஸ் செய்யுங்கள் (ஒரு விலையுயர்ந்த கணக்கீடு, அல்லது மெமோயிஸ் செய்யப்பட்ட சிறுவர் பல்லாம் மீண்டும் ரெண்டர் செய்கிறது). எல்லா முற்றிலும் `useMemo`/`useCallback` குறிப்பைச் சேர்க்கிறது மற்றும் பதிலுமாக மெதுவாக இருக்கலாம். (React 19 இன் compiler தானாக மெமோயிஸ் செய்ய முடியும், தேவையைக் குறைக்கிறது.)