Duka biyu suna adana wani abu a cikin renders don kada a sake ƙididdige/ƙirowa a kowane lokaci:
useMemoyana adana .
useCallback yana adana nisbinti na aiki (itane useMemo(() => fn, deps)).Suna wanzuwa don guje (a) maimaita aiki mai tsada da (b) karya daidai-daidai na kuzari da iyalan tabbatattun abubuwa suna dogara da su.
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} />;
}
Ba tare da useCallback ba, handleSelect aiki ne sabun-sabun a kowane render. React.memo(Grid) zai ga yin "sabo" property kuma a sake yin render duk da haka, yana karfe memoization. Daidai gida ga abin da ke jazzada aiki tabbatattun yarar jiya ko aka yi amfani da shi a cikin useEffect dependency array.
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing