Memoization in React: useMemo vs. useCallback

Part 1: The Problem - Re-renders and Referential Equality

Before we can optimize, we need to be crystal clear on what we're optimizing for. By default, when a React component re-renders (due to a state or prop change), it also re-renders all of its children. This is usually very fast and not a problem.

However, sometimes we have a component that is expensive to render, and we want to prevent it from re-rendering if its props haven't actually changed. React's solution for this is React.memo. It's a higher-order component that wraps your component and performs a shallow comparison of its props. If the props are the same as the last render, React skips re-rendering the component.

This works perfectly for primitive props (strings, numbers). But it breaks down with reference types (objects, functions).

Let's watch a video that excellently demonstrates this foundational concept.

The key takeaway is that even if a function or object prop is visually identical between renders, it's a new instance in memory. React.memo sees a new reference, concludes the props have changed, and re-renders the child, defeating the optimization.

Part 2: Memoizing Functions with useCallback

As you saw in the video, passing a newly defined function to a memoized child component breaks the memoization. The useCallback hook is the direct solution to this problem.

useCallback returns a memoized version of a function that only changes if one of its dependencies has changed. This allows you to pass a stable function reference to child components, preserving the optimization benefits of React.memo.

The syntax is:
const memoizedCallback = useCallback(callbackFunction, [dependencies]);

Let's continue with the video you just watched to see useCallback in action.

By wrapping the updateCounterFromChild function in useCallback, its reference is preserved across re-renders of the parent component. React.memo now correctly sees that the onClick prop has not changed, and it skips the unnecessary re-render.

Part 3: Memoizing Values with useMemo

useCallback is specifically for functions. What about other non-primitive values like objects and arrays? Or what if we have a calculation inside our component that is computationally expensive and we don't want to re-run it on every single render?

This is where useMemo comes in.

useMemo returns a memoized value that is the result of a function call. It re-runs the function and re-computes the value only when one of its dependencies has changed.

The syntax is:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

There are two primary use cases for useMemo. The following article by Josh W. Comeau provides an excellent, in-depth explanation of both.

To summarize the two use cases:

1. Expensive Computations: If a component re-renders due to an unrelated state change (like a clock ticking), useMemo prevents a costly calculation from being wastefully re-executed.
2. Referential Stability: Just like useCallback for functions, useMemo provides a stable reference for objects and arrays, allowing React.memo to work correctly.

Part 4: Differentiating useMemo and useCallback

At this point, you might notice a strong similarity between the two hooks. That's because they are fundamentally related.

The simplest way to put it is:

• useMemo memoizes a value.
• useCallback memoizes a function.

In fact, useCallback is just syntactic sugar over useMemo. The following two lines of code are equivalent:

// This...
const memoizedFn = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

// ...is equivalent to this:
const memoizedFn = useMemo(() => {
  return () => {
    doSomething(a, b);
  };
}, [a, b]);

useCallback(fn, deps) is simply a more convenient and readable way of writing useMemo(() => fn, deps).

Part 5: An Expert's Perspective - When to Optimize

You now understand what these hooks do and how they work. The final, and arguably most important, question is when to use them. As an experienced developer, you know that premature optimization is a common anti-pattern. These hooks are not free; they add complexity and consume memory.

A common misconception is that useMemo or useCallback on a prop will, by itself, prevent a child component from re-rendering. This is incorrect. These hooks are only effective for preventing re-renders when the child component they are passed to is wrapped in React.memo.

The following article provides a sharp, insightful perspective on this topic.

Based on this, here are some professional guidelines for using these hooks:

1. Don't Optimize Prematurely: Don't wrap every function and object in these hooks by default. React is very fast. Only apply these optimizations in response to an actual, identified performance issue (e.g., using the React Profiler).
2. The React.memo Connection: The primary use case for useCallback and useMemo (for referential stability) is to make React.memo work effectively on child components that receive non-primitive props. If the child isn't memoized, memoizing its props is often pointless.
3. Truly Expensive Calculations: Use useMemo for calculations that are genuinely slow and are being re-run unnecessarily. As you read, simple array filtering/mapping is usually not "expensive." Calculating thousands of prime numbers, however, is.
4. Stable APIs: It's good practice to use useMemo and useCallback when creating custom hooks or context providers. This ensures you provide a stable API to consumers, who may be relying on referential equality for their own optimizations.

Conclusion

You've now moved beyond just knowing the syntax of useMemo and useCallback to understanding their deep-seated purpose in React's rendering model.

Key Takeaways:

• Core Purpose: Both hooks are for memoization. They help optimize performance by preserving a stable reference for non-primitives across re-renders (useCallback for functions, useMemo for objects/arrays) or by caching the result of an expensive calculation (useMemo).
• The React.memo Partnership: The most significant use case for useCallback and useMemo is to enable React.memo to correctly prevent re-renders of child components that receive functions or objects as props.
• useCallback vs. useMemo: useCallback(fn, deps) is syntactic sugar for useMemo(() => fn, deps). The former memoizes the function itself, while the latter memoizes the return value of a function.
• Optimization Strategy: These are not tools to be used indiscriminately. They should be applied strategically to solve diagnosed performance problems, not as a default coding practice.

What's Next?

We've focused on hooks that help manage state and re-renders. However, sometimes you need to interact with the DOM directly or hold a value that can change without triggering a re-render. In our next lesson, we will explore useRef, a hook that provides a powerful way to "escape" the typical React state and render cycle for specific use cases.