When to Use React.memo: Improve React Performance Easily

Use React.memo to wrap a functional component when you want to avoid re-rendering it unless its props change. It helps improve performance by skipping rendering for components that receive the same props repeatedly.

How It Works

React.memo is like a smart guard for your component. Imagine you have a friend who only wants to hear your story if it changes. If you tell the same story again, they politely ignore it. Similarly, React.memo remembers the last props your component got and skips re-rendering if the props are the same.

This works by doing a shallow comparison of the props before rendering. If nothing changed, React skips the work of rendering that component and its children, saving time and resources. This is especially helpful in big apps where many components update often but some parts don’t need to change.

Example

This example shows a simple counter with a child component wrapped in React.memo. The child only re-renders when its props change.

jsx

import React, { useState } from 'react';

const Child = React.memo(({ count }) => {
  console.log('Child rendered');
  return <div>Count is: {count}</div>;
});

export default function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Child count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="Type here"
      />
    </div>
  );
}

Output

Child rendered
Count is: 0

// When typing in input, 'Child rendered' does NOT appear again
// When clicking 'Increment Count', 'Child rendered' appears again with updated count

When to Use

Use React.memo when your component:

• Receives props that change infrequently.
• Is pure and renders the same output for the same props.
• Is expensive to render or appears many times in your app.

For example, use it for list items, buttons, or display components that don’t need to update on every parent change. Avoid using it on components that rely on internal state or context that changes often, as it won’t help and may add overhead.

Key Points

• React.memo skips re-rendering when props are unchanged.
• It does a shallow comparison of props by default.
• Use it to optimize functional components with stable props.
• Not useful for components with frequent prop changes or internal state updates.
• Can improve performance but adds a small comparison cost.

Key Takeaways

React.memo prevents re-rendering when props stay the same, boosting performance.

Use it for pure functional components with stable props that render often.

Avoid using React.memo on components with frequently changing props or internal state.

It works by shallowly comparing previous and next props before rendering.

React.memo adds a small overhead, so use it only when it benefits your app.