React Memo

In React, every time a component’s state or props change, the component re-renders. However, sometimes re-rendering a component is unnecessary and can slow down your app. That’s where React.memo comes in.

What is React.memo?

React.memo is a higher order component (HOC) that helps you optimize performance by preventing unnecessary re-renders of functional components.

It works by memorizing (caching) the result of a component render and skipping it if the props haven’t changed.

const MyComponent = React.memo(function MyComponent(props) {
  // component code
});

In short, if the props of the component are the same as last time, React will reuse the last rendered result instead of rendering it again.

Why Use React.memo?

By default, React re-renders a component when its parent re-renders—even if the props haven’t changed. This behavior can cause performance issues in large or complex applications.

React.memo helps in such cases by skipping the render of a component when the props remain the same.

Use cases:

• Large component trees
• Repeated re-renders due to parent updates
• Components receiving the same props frequently

Simple Example

import React from 'react';

const Title = React.memo(({ text }) => {
  console.log("Rendering Title");
  return <h1>{text}</h1>;
});

export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <Title text="Hello World!" />
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  );
}

In this example:

• The App component re-renders whenever the button is clicked.
• But Title is wrapped in React.memo, so it only re-renders if text changes.
• Since text="Hello World!" stays the same, Title doesn’t re-render.

Check the console—”Rendering Title” only logs once!

How Does React.memo Work?

Internally, React.memo does a shallow comparison of props.

• If props are primitive values (like strings, numbers, booleans), it works well.
• But if props are objects, arrays, or functions, React.memo may not behave as expected unless you memoize those too.

With Custom Comparison

You can also pass a custom comparison function to React.memo:

const MyComponent = React.memo((props) => {
  // component code
}, (prevProps, nextProps) => {
  return prevProps.value === nextProps.value;
});

The function should return true if the props are equal (and re-render can be skipped), or false if they are different (and should re-render).

React.memo vs useMemo vs useCallback

• React.memo: Prevents a component from re-rendering.
• useMemo: Memoizes a value inside a component.
• useCallback: Memoizes a function inside a component.

They all help in performance optimization, but work at different levels.

When Not to Use React.memo?

You don’t need React.memo if:

• Your component is small and cheap to render.
• Props change frequently anyway.
• You’re not facing any performance issues.

Unnecessary use of React.memo can add complexity and even reduce performance if misused.

Summary

React.memo is a powerful optimization tool, but like all tools, it’s most effective when used thoughtfully. Use it when you notice unnecessary re-renders and want to improve your app’s performance.