Drills Repository
21 Drills · All Belts · usememo-usecallback
useMemo Without a Dependency Array
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.
What Does useMemo Cache?
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.
useCallback dependency change behavior
When dependencies change, React stops reusing the previous cached function and stores the new function created during the current render. The new callback captures the latest closure values naturally through JavaScript semantics.
What useCallback Actually Memoizes
useCallback does not stop JavaScript from creating a new function on every render; it only decides which of those functions the component actually receives back. When the dependency array is unchanged, React discards the freshly created function and returns the function it cached from the previous render instead.
useMemo with memoized child component
A child wrapped in memo skips rendering only if its props are referentially equal to the previous render. useMemo can keep arrays or objects stable between renders so the child receives the same prop reference.
Memoizing function with useMemo vs useCallback
useCallback(fn, deps) is essentially syntactic sugar for useMemo(() => fn, deps), since both ultimately memoize and return a stable function reference. Reaching for useCallback directly skips the extra wrapping function useMemo requires and communicates the memoization intent more clearly to other developers.
Relying on useMemo for Correctness
React may discard cached values from useMemo in certain situations, such as during development remounts or when a component suspends before finishing its first render. useMemo exists purely to speed up expensive calculations, so application logic should never depend on a memoized value persisting across renders for correctness.
When Should You Use useCallback?
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 as a useEffect Dependency
useCallback memoizes a function's reference itself, so the same reference is returned across renders as long as its own dependencies remain unchanged. Because logItems keeps the same reference between renders, the Effect that lists logItems as a dependency sees no change and skips re-running unnecessarily.
What Does useCallback Cache Between Renders?
useCallback caches the identity of the function itself between renders, not the value it returns when called. As long as its dependency array stays the same, React hands back that exact cached function reference instead of creating a new one on every render.
useMemo vs useCallback
useMemo caches the value returned by running a function on each render, while useCallback caches the function reference itself without calling it. Both hooks compare their dependency arrays with Object.is to decide whether to reuse the cached value or callback, but useMemo returns computed data and useCallback returns a stable function identity.
Relying on useCallback for Correctness
React may throw away cached callbacks in scenarios like file edits during development or suspension during initial mount. useCallback is intended as a performance optimization, not as a guarantee of persistent identity for application logic correctness.