Drills Repository
21 Drills · All Belts · usememo-usecallback
useMemo caches calculation result
useMemo caches the result of a calculation and reuses that value as long as its dependencies remain unchanged. This is distinct from useCallback, which caches the function reference itself rather than a computed result.
Missing dependency array recalculates every render
Without a dependency array, React has no conditions for reusing the cached value, so the calculation runs on every render. This defeats the purpose of memoization entirely, since the cached value is never reused.
useCallback for Effect dependency stabilization
Functions declared during rendering receive a new identity on every render, and an Effect's dependency comparison relies on reference identity rather than function contents. Wrapping the helper in useCallback stabilizes its reference, so the dependency no longer changes on every render.
Memoizing function with useMemo vs useCallback
useCallback(fn, deps) is effectively a cleaner shorthand for useMemo(() => fn, deps). Both stabilize function identity, but useCallback avoids unnecessary nested functions and communicates intent more clearly.
Expensive calculation vs unnecessary memoization
useMemo is useful when a calculation is actually expensive and dependencies rarely change. Overusing memoization can reduce readability without improving performance.
useCallback returns cached function identity
useCallback caches the function reference itself, not the result of invoking it. As long as its dependencies remain unchanged, React returns the exact same function object across renders.
useCallback useful with memoized child
useCallback is most useful when function identity matters, such as passing a callback prop to a child wrapped in React.memo. A stable function reference allows the memoized child to correctly skip unnecessary re-renders.
useCallback stabilizing dependencies
useCallback memoizes a function's reference itself, so the same reference is returned across renders as long as its own dependencies remain unchanged. Since dependency arrays compare by reference equality rather than function body equality, this stable reference prevents effects that depend on it from re-running unnecessarily.
Missing dependency in useMemo
useMemo recalculates its cached value only when a listed dependency changes. Omitting sortOrder from the dependency array means React can reuse a stale memoized result computed with an earlier sort order even after sortOrder changes.
Updater function removes callback dependency
An updater function receives the latest state directly from React at update time rather than reading it from a closure, so the callback no longer depends on the todos variable captured from render scope. This removes todos as a dependency and improves the stability of the memoized callback's reference.
Object dependency defeats memoization
Every object literal expression creates a new reference on each render, even when its contents are identical. Since useMemo compares dependencies using Object.is, React treats that dependency as changed on every render and reruns the calculation, defeating the memoization.
useMemo vs useEffect
Using useEffect plus state for derived values causes an additional render after the Effect updates state. useMemo caches the calculation result directly during rendering without triggering extra renders.