Oboje cachiraju nešto kroz rendera kako se ne bi ponovno izračunalo/kreiralo svaki put:
useMemocachira .
Oboje cachiraju nešto kroz rendera kako se ne bi ponovno izračunalo/kreiralo svaki put:
useMemo cachira .useCallback cachira identitet funkcije (to je useMemo(() => fn, deps)).Postoje kako bi se izbjeglo (a) ponavljanje skupog posla i (b) slomljenja referentne jednakosti na koju se memorizirani child elementi oslanjaju.
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} />;
}
Bez useCallback, handleSelect je potpuno nova funkcija svakom renderu. React.memo(Grid) bi vidio "novu" prop i ionako bi se ponovno renderirao, poništavajući memoizaciju. Isto za objekt prosljeđen memoriziranom child elementu ili korišten u useEffect dependency array.
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
useMemo/useCallback svugdje dodaje buku i može biti čak i sporija. (React 19 kompajler može automatski memorizirati, smanjujući potrebu.)