Improving Performance in React with React.memo, useMemo, and useCallback

Published on 25.5.2020

React is a powerful library for building user interfaces, but like any web application, performance can be a concern as your app grows. Rendering performance becomes especially important when working with large, complex components or lists. In this post, we’ll dive into memoization in React, using React.memo, useMemo, and useCallback to avoid unnecessary re-renders and optimize performance.

We’ll cover the basics of memoization, explore when and how to use these tools, and see practical examples of improving performance in a React application.

---

Understanding Memoization in React

At its core, memoization is a technique to optimize functions by caching their results so that they don’t need to be recalculated on every call. In the context of React, memoization helps optimize rendering by preventing unnecessary re-renders of components or recalculations of expensive functions.

React provides several tools to help with memoization, including React.memo, useMemo, and useCallback. Let’s explore these tools and how they can be used to improve performance.

---

1. React.memo: Memoizing Functional Components

React.memo is a higher-order component that helps optimize functional components by preventing unnecessary re-renders. If the component’s props haven’t changed, React will skip rendering and reuse the last rendered output.

This is particularly useful for components that receive complex props (like large objects or arrays) that don’t change frequently.

How React.memo Works

React.memo compares the props of a component between renders. If the props haven’t changed, the component is skipped and the previous render output is reused.

Example:

const MyComponent = React.memo(function MyComponent({ name, age }) {
  console.log("Rendering MyComponent");
  return <div>{name} is {age} years old</div>;
});

How it helps:

• In the example above, MyComponent will only re-render when either the name or age prop changes.
• If the parent component re-renders but the props passed to MyComponent haven’t changed, React will skip the render for MyComponent, improving performance.

When to Use React.memo

• Complex components that render expensive UI based on props.
• Components that rely on props that rarely change.
• Pure components where props are stable and predictable.

Caution:

React.memo only shallowly compares the props. If you pass complex objects like arrays or functions as props, React will not detect changes in their contents (i.e., a new object or array reference will cause a re-render). For deep comparisons, you may need to handle it manually or use a custom comparison function.

---

2. useMemo: Memoizing Expensive Calculations

The useMemo hook is used to memoize expensive calculations and avoid recalculating values on every render. It takes a function and a dependency array. If the dependencies haven’t changed, it will return the memoized result from the previous render.

How useMemo Works

useMemo is used for memoizing values, such as computed results or derived data that would otherwise be recalculated on every render.

Example:

import { useMemo } from 'react';

function MyComponent({ items }) {
  // Memoizing a filtered list
  const filteredItems = useMemo(() => {
    return items.filter(item => item.isActive);
  }, [items]); // Recalculate only when 'items' changes

  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

How it helps:

• In this example, useMemo ensures that the filtered list is only recalculated when items changes.
• Without useMemo, the list would be filtered on every render, even if the items array hasn’t changed. This could be expensive if items is large.

When to Use useMemo

• When a calculation or transformation is expensive, and you don’t want it to run on every render.
• When working with large datasets or complex data manipulation that is computationally expensive.
• To memoize results that depend on certain dependencies (like props or state).

Caution:

Don’t overuse useMemo. It’s a tool to improve performance, but React’s built-in optimization (like the virtual DOM diffing algorithm) can often handle things efficiently without needing useMemo.

---

3. useCallback: Memoizing Functions

useCallback is similar to useMemo, but instead of memoizing a value, it memoizes a function. It ensures that a function reference remains the same between renders, preventing unnecessary re-renders of child components that depend on that function.

How useCallback Works

If a function is passed as a prop to a child component, the child component will re-render every time the parent re-renders, because the function reference is recreated on each render. useCallback prevents this by ensuring the function’s reference is preserved between renders.

Example:

import { useCallback } from 'react';

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log("Button clicked");
  }, []); // Function remains the same between renders

  return <ChildComponent onClick={handleClick} />;
}

function ChildComponent({ onClick }) {
  console.log("ChildComponent rendered");
  return <button onClick={onClick}>Click me</button>;
}

How it helps:

• In this example, useCallback ensures that handleClick has the same function reference between renders, preventing ChildComponent from re-rendering unnecessarily when the parent re-renders.

When to Use useCallback

• When passing functions as props to child components, especially when those components use React.memo or rely on reference equality checks.
• When you have a function that doesn’t need to be recreated on every render.

Caution:

useCallback is useful primarily when you are passing functions down to child components or using functions inside useEffect with dependencies. Overusing it can add unnecessary complexity and might have negligible benefits.

---

Real-World Performance Optimization Examples

Optimizing Lists with React.memo, useMemo, and useCallback

In a real-world scenario, performance can suffer when rendering large lists. Here’s an example where these tools work together to prevent unnecessary re-renders.

Example:

import React, { useState, useCallback, useMemo } from 'react';

const ListItem = React.memo(({ item, onClick }) => {
  console.log("Rendering list item");
  return <li onClick={() => onClick(item)}>{item.name}</li>;
});

function List({ items }) {
  const [selected, setSelected] = useState(null);

  const handleClick = useCallback((item) => {
    setSelected(item);
  }, []); // Function reference remains the same

  const memoizedItems = useMemo(() => {
    return items.map(item => (
      <ListItem key={item.id} item={item} onClick={handleClick} />
    ));
  }, [items, handleClick]); // Recalculate only when 'items' or 'handleClick' changes

  return (
    <ul>
      {memoizedItems}
    </ul>
  );
}

In this example:

• ListItem is memoized with React.memo, so it only re-renders when its item prop changes.
• useMemo is used to memoize the list of items, preventing unnecessary recalculations when the items array doesn’t change.
• useCallback is used to memoize the handleClick function, ensuring that the function reference remains stable between renders.

By combining these tools, we reduce unnecessary re-renders, improving performance when rendering large lists.

---

Conclusion

Performance optimization is crucial for building responsive React applications. Tools like React.memo, useMemo, and useCallback allow us to avoid unnecessary re-renders, leading to more efficient and performant applications.

Key Takeaways:

• React.memo optimizes functional components by preventing unnecessary re-renders based on prop changes.
• useMemo helps avoid expensive calculations on every render by memoizing results.
• useCallback prevents the recreation of function references between renders, optimizing child component re-renders.

Using these techniques wisely can drastically improve the performance of your React applications, especially as they grow in complexity.