Skip to main content

`React.memo` for Component Memoization (Part 1): Preventing Re-renders of Functional Components #122

📖 Introduction​

Following our exploration of what causes a component to re-render, this article introduces our first tool for optimizing performance: React.memo. We will learn how to use this higher-order component to prevent unnecessary re-renders of functional components.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • What causes a component to re-render.
  • Functional components and props.
  • The concept of memoization.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ What React.memo Is: Understanding the purpose and benefits of React.memo.
  • ✅ How to Use React.memo: The basic syntax for using React.memo.
  • ✅ Core Implementation: A practical example of how to use React.memo to prevent a child component from re-rendering unnecessarily.

🧠 Section 1: The Core Concepts of React.memo​

As we learned in the previous article, when a parent component re-renders, all of its child components will re-render by default. This can lead to performance issues if the child components are expensive to render.

React.memo is a higher-order component (HOC) that you can use to wrap a functional component. It tells React to memoize the component, which means that React will skip re-rendering the component if its props have not changed.

By default, React.memo does a shallow comparison of the component's props. If the props are the same, it will reuse the last rendered result.

💻 Section 2: Deep Dive - Implementation and Walkthrough​

Let's see how to use React.memo to prevent a child component from re-rendering unnecessarily.

2.1 - The Problem: Unnecessary Re-renders​

First, let's look at an example of a child component that re-renders unnecessarily.

// Parent.js
import React, { useState } from 'react';
import Child from './Child';

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Parent count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment Parent</button>
      <Child />
    </div>
  );
}

// Child.js
import React from 'react';

function Child() {
  console.log('Child re-rendered');
  return <p>I am a child component.</p>;
}

In this example, every time the "Increment Parent" button is clicked, the Child component will re-render, even though its props have not changed.

2.2 - The Solution: React.memo​

Now, let's use React.memo to prevent the Child component from re-rendering.

// Child.js
import React from 'react';

const Child = React.memo(() => {
  console.log('Child re-rendered');
  return <p>I am a child component.</p>;
});

export default Child;

That's it! By wrapping our Child component in React.memo, we've told React to only re-render it if its props change. Since the Child component has no props, it will now only render once.

💡 Conclusion & Key Takeaways​

In this article, we've learned how to use React.memo to prevent unnecessary re-renders of functional components. This is a simple but powerful tool that can significantly improve the performance of your React applications.

Let's summarize the key takeaways:

  • React.memo is a higher-order component that memoizes a functional component.
  • It prevents a component from re-rendering if its props have not changed.
  • It's a great tool for optimizing the performance of your application.

Challenge Yourself: To solidify your understanding, try to create a component that takes a prop and wrap it in React.memo. Then, create a parent component that passes a prop to the child and see if you can make the child re-render by changing the prop.

➡️ Next Steps​

You now have a basic understanding of React.memo. In the next article, "React.memo for Component Memoization (Part 2)", we will explore some more advanced features of React.memo, such as how to use a custom comparison function.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • Higher-Order Component (HOC): A function that takes a component and returns a new component.
  • Shallow Comparison: A comparison of two objects that only checks if the top-level properties are the same.

Further Reading​