બંને કંઈક રેન્ડર્સ વચ્ચે કેશ કરે છે જેથી તે દરેક વાર ફરીથી કમ્પ્યુટ/રિક્રિએટ ન થાય:
useMemoએક કેશ કરે છે.
બંને કંઈક રેન્ડર્સ વચ્ચે કેશ કરે છે જેથી તે દરેક વાર ફરીથી કમ્પ્યુટ/રિક્રિએટ ન થાય:
useMemo એક કેશ કરે છે.useCallback એક ફંક્શનની ઓળખ કેશ કરે છે (તે useMemo(() => fn, deps) છે).તેઓ (a) મોંઘા કામ પુનરાવર્તન કરવાથી બચવા અને (b) મેમોઇઝ કરેલ ચિલ્ડ્રેન પર નિર્ભર સંદર્ભ સમાનતા તોડવાથી બચવા માટે અસ્તિત્વ ધરાવે છે.
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) "નવું" પ્રોપ જોશે અને તેમ છતાં ફરીથી રેન્ડર કરશે, મેમોઇઝેશનને હરાવશે. એવજ રીતે, એક મેમોઇઝ કરેલ ચાઇલ્ડને પાસ કરેલ ઑબ્જેક્ટ અથવા useEffect ડિપેન્ડન્સી એરે માટે વપરાય છે.
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
useMemo/useCallback અવાજ ઉમેરે છે અને ધીમો પણ હોઈ શકે છે. (React 19 ના કમ્પાઇલર આપોઆપ મેમોઇઝ કરી શકે છે, આવશ્યકતા ઘટાડે છે.)