Beide cachen iets over renders heen zodat het niet elke keer opnieuw wordt berekend/aangemaakt:
useMemocacht een .
Beide cachen iets over renders heen zodat het niet elke keer opnieuw wordt berekend/aangemaakt:
useMemo cacht een .useCallback cacht een functie's identiteit (het is useMemo(() => fn, deps)).Ze bestaan om (a) herhaalwerk van dure berekeningen te voorkomen en (b) referentiële gelijkheid niet te breken waar gememoizeerde children op vertrouwen.
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} />;
}
Zonder useCallback is handleSelect een gloednieuwe functie bij elke render. Een React.memo(Grid) zou een "nieuwe" prop zien en toch opnieuw renderen, waardoor de memoization voorbijgestreefd wordt. Hetzelfde geldt voor een object dat aan een gememoizeerd child wordt doorgegeven of in een useEffect dependency array wordt gebruikt.
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
useMemo/useCallback overal toepassen voegt ruis toe en kan zelfs langzamer zijn. (React 19's compiler kan automatisch memoizeren, wat de noodzaak vermindert.)Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren