Optimizing Performance with `useMemo` and `useCallback`

The Cost of Re-Renders

First, let's briefly recap what causes a component to re-render. As you know, React keeps the UI in sync with your app's state. When something changes, it re-renders to create a new "snapshot" of the UI.

A component re-renders if:

1. Its own state changes (e.g., via useState).
2. Its props change.
3. A context it consumes changes value.
4. Its parent component re-renders.

This last point is the source of many performance issues. By default, when a parent component re-renders, it re-renders its entire child subtree, even if the children's props haven't changed. While React is very fast, this can become a problem in two main scenarios:

• Expensive Calculations: A component performs a computationally intensive task on every render (e.g., sorting a large array).
• Unnecessary Child Renders: A child component re-renders just because its parent did, even though nothing visually needs to change for that child.

Memoization hooks are our primary tools for addressing these two problems.

useMemo: Avoiding Expensive Calculations

Let's start with useMemo. Its purpose is to "remember" or memoize the result of an expensive calculation and only re-compute it when its inputs have actually changed.

Imagine a component that displays a list of prime numbers. Calculating these primes can be slow. If an unrelated piece of state in the component (like a theme toggle) changes, the component re-renders, and we would wastefully re-calculate the same list of primes.

useMemo solves this by caching the result.

const expensiveResult = useMemo(() => {
  // This function only runs when a or b changes.
  return computeExpensiveValue(a, b);
}, [a, b]); // The dependency array

The following article from Josh W. Comeau provides an excellent explanation of this concept using a prime number generator and a clock.

Preventing Re-Renders with React.memo and useCallback

The second, and more common, use case for memoization is preventing components from re-rendering unnecessarily. React provides a helper for this called React.memo. A component wrapped in React.memo will only re-render if its props have changed.

const MyComponent = ({ someProp }) => { /* ... */ };
export default React.memo(MyComponent);

However, there's a catch. This brings us to a fundamental JavaScript concept you must understand to optimize React apps: referential equality.

The Problem: Referential Equality

In JavaScript, primitive types (strings, numbers, booleans) are compared by their value.
5 === 5 is true.

However, objects, arrays, and functions are compared by reference. They are only considered equal if they point to the exact same object in memory.

const obj1 = { id: 1 };
const obj2 = { id: 1 };
console.log(obj1 === obj2); // false! They look the same but are two different objects.

const obj3 = obj1;
console.log(obj1 === obj3); // true! They point to the same object.

The video below gives a fantastic, non-React explanation of this concept. Understanding this is essential.

Because functions are objects in JavaScript, a new function defined inside a component is created on every single render. If you pass this function as a prop to a React.memo-wrapped child, React.memo will see a "new" prop on every render and re-render the child, defeating the purpose of memoization.

The next section of the Josh W. Comeau article perfectly illustrates this problem.

The Solution: useCallback

As you just read, useCallback is the solution. It does for functions what useMemo does for values: it memoizes the function itself. It returns the exact same function reference between renders, as long as its dependencies don't change.

This ensures that from the child component's perspective, the prop has not changed, and React.memo can successfully skip the re-render.

Putting It All Together: A React Native Example

We've covered the theory. Now, let's see it all come together in a practical React Native scenario. This video from notJust.dev demonstrates a common performance bottleneck with a FlatList and how to solve it using the hooks we've discussed.

useMemo vs. useCallback: The Summary

To put it as simply as possible:

• useMemo invokes its function and memoizes the return value.
• useCallback memoizes the function definition itself.

As the notJust.dev video states: "useCallback returns its function when dependencies change, while useMemo calls its function and returns the result when dependencies change."

Best Practices & When NOT to Memoize

Given your role as CTO, making pragmatic technical decisions is key. Memoization is not free; it uses memory to store the memoized values and adds a small overhead to compare dependencies on every render. Over-optimizing can make code more complex and can sometimes even harm performance.

The golden rule is: profile first, then optimize. Use tools like the React DevTools Profiler (which we'll cover later) to find actual bottlenecks before reaching for these hooks.

This final reading provides excellent, pragmatic guidelines on when to use memoization and common mistakes to avoid.

Key Takeaways

• Unnecessary re-renders and re-computations can harm your app's performance.
• useMemo caches the result of an expensive calculation, preventing it from re-running unnecessarily.
• useCallback caches a function definition, preserving its reference to prevent child components from re-rendering.
• The combination of React.memo on a child component and useCallback for any function props passed to it is the standard pattern for preventing unnecessary re-renders.
• Referential equality is the core concept explaining why these hooks are needed for objects, arrays, and functions.
• Don't over-optimize. Profile your application to find real bottlenecks before applying memoization.

You've now covered all the core React hooks for managing state, side effects, and performance. This foundational knowledge is essential for building high-quality, scalable applications.

In our next lesson, we'll conclude this module by learning how to create custom hooks. This powerful pattern will allow you to extract and reuse stateful logic across your application, often combining the very hooks we've just reviewed (useState, useEffect, useCallback, etc.).