Optimizing Component Rendering with React.memo in React JS

React applications are known for their reactivity, but sometimes unnecessary re-renders can degrade performance. One way to optimize rendering in React is by using React.memo, a higher-order component that prevents re-renders of functional components when their props have not changed.

What is React.memo?

React.memo is a higher-order component that can be used to optimize the performance of functional components in React. It memorizes the rendered output of a component and only re-renders the component if its props change. This is particularly useful when dealing with expensive components that do not need to be re-rendered on every state or prop change.

Why Use React.memo?

  • Improve Performance: Prevents unnecessary re-renders, especially in large applications or components that are computationally expensive.
  • Optimize Child Components: If a parent component re-renders, its child components will re-render by default. Using React.memo can help prevent this in cases where the child components' props have not changed.
  • Reduce Load Times: By avoiding unnecessary updates, React can focus on the components that really need to be updated, improving load times.

How Does React.memo Work?

When you wrap a functional component in React.memo, React will perform a shallow comparison of the component’s props. If the props have not changed, React skips the re-render and reuses the last rendered output. If the props have changed, React re-renders the component.

Basic Syntax

  
  const MyComponent = React.memo(function MyComponent(props) {
      // Component logic
      return 
{props.someValue}
;
  });

This syntax wraps the MyComponent component with React.memo, ensuring that it only re-renders when its props change.

Example 1: Basic Usage of React.memo

Let’s see how we can use React.memo to optimize a simple component that displays a value.

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

  const Counter = React.memo(function Counter({ count }) {
      console.log('Rendering Counter');
      return 
{count}
;
  });

  function ParentComponent() {
      const [count, setCount] = useState(0);
      const [name, setName] = useState('John');

      return (
          

              
              
              
              
{name}

          

      );
  }

  export default ParentComponent;

In this example, Counter is wrapped in React.memo. The ParentComponent has two pieces of state: count and name. When you click the "Increment" button, only the Counter component will re-render because name has not changed. Clicking the "Change Name" button will not cause the Counter component to re-render.

Explanation

The console log in Counter will only appear when the count prop changes. This shows that React.memo is effectively preventing re-renders of the Counter component when the name state changes, thus improving performance.

Example 2: Custom Comparison Function with React.memo

Sometimes, you might want more control over when a component should re-render. By default, React.memo performs a shallow comparison of props. However, you can pass a custom comparison function to React.memo to fine-tune this behavior.

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

  const Counter = React.memo(
      function Counter({ count, name }) {
          console.log('Rendering Counter');
          return 
{name}: {count}
;
      },
      (prevProps, nextProps) => {
          // Prevent re-render if count hasn't changed
          return prevProps.count === nextProps.count;
      }
  );

  function ParentComponent() {
      const [count, setCount] = useState(0);
      const [name, setName] = useState('John');

      return (
          

              
              
              
          

      );
  }

  export default ParentComponent;

In this example, we provide a custom comparison function that only triggers a re-render of the Counter component if the count prop has changed. The name prop will no longer trigger a re-render, even when it changes.

Explanation

Now, when you change the name state, the Counter component will not re-render. This optimization can be helpful when the component receives multiple props, but only some of them need to trigger a re-render.

Example 3: React.memo with List Rendering

React.memo can also be useful in optimizing the rendering of lists. If a list of items is re-rendering frequently, you can use React.memo to prevent unnecessary renders of each list item.

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

  const ListItem = React.memo(function ListItem({ item }) {
      console.log('Rendering:', item);
      return 
{item}
;
  });

  function List() {
      const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
      const [selectedItem, setSelectedItem] = useState(null);

      const handleItemClick = (item) => {
          setSelectedItem(item);
      };

      return (
          

              {items.map(item => (
                  
              ))}
              
              
Selected Item: {selectedItem}

          

      );
  }

  export default List;

Here, the ListItem component is wrapped in React.memo, ensuring that each item in the list only re-renders if its props change. When the "Add Item" button is clicked, new items are added to the list, but only the new item will cause a re-render, not the other list items.

When to Use React.memo

React.memo is a powerful tool for performance optimization, but it should be used judiciously. Here are some cases where using React.memo is beneficial:

  • Expensive components: When a component does expensive rendering calculations and the props don’t change frequently.
  • Large lists: When rendering large lists of items that don’t change often.
  • Components with complex props: When you need to prevent re-renders based on specific props changes.

However, overusing React.memo can have performance overhead due to shallow comparisons and additional render cycles. It's recommended to profile the application and test whether the performance improvement is noticeable.

Conclusion

React.memo is an excellent tool for optimizing component re-renders in React applications. By memorizing the rendered output of functional components, it prevents unnecessary updates, improving performance. When used correctly, it can reduce rendering costs, especially in large and complex applications. However, it’s important to consider when and where to use it, as overuse can lead to performance issues.




Advertisement