இரண்டும் ஒவ்வொரு முறை மீண்டும் கணக்கிடப்படாமல்/மீண்டும் உருவாக்கப்படாமல் இருக்க, ரெண்டர் முழுவதும் ஒன்றைக் கேச் செய்கின்றன:
இரண்டும் ஒவ்வொரு முறை மீண்டும் கணக்கிடப்படாமல்/மீண்டும் உருவாக்கப்படாமல் இருக்க, ரெண்டர் முழுவதும் ஒன்றைக் கேச் செய்கின்றன:
useMemo கணக்கிடப்பட்ட மதிப்பை கேச் செய்கிறது.useCallback செயல்பாட்டின் அடையாளத்தை கேச் செய்கிறது (இது useMemo(() => fn, deps)).அவை (அ) விலையுயர்ந்த வேலையை மீண்டும் செய்வதைத் தவிர்க்கவும் மற்றும் (ஆ) மெமோயிஸ் செய்யப்பட்ட சிறுவர்கள் சார்ந்திருக்கும் குறிப்பு சমानতையை உடைக்கவும் உள்ளன.
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 சார்பு தொகுப்பில் பயன்படுத்தப்பட்ட ஒரு பொருளையும் அதே போல.
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
useMemo/useCallback குறிப்பைச் சேர்க்கிறது மற்றும் பதிலுமாக மெதுவாக இருக்கலாம். (React 19 இன் compiler தானாக மெமோயிஸ் செய்ய முடியும், தேவையைக் குறைக்கிறது.)