React.memo

Introduction

By default, when a parent component re-renders, React re-renders all of its child components too — even children whose props did not actually change. Usually this is fast enough to be invisible, but in components that do expensive rendering work, those unnecessary re-renders can add up.

React.memo is a built-in tool that lets a component skip re-rendering when its props are the same as last time, giving you a simple way to optimize components that re-render more often than necessary.

What Does React.memo Do?

React.memo() is a function that wraps a component and returns a memoized version of it. Before re-rendering that memoized component, React compares its new props against its previous props using a shallow comparison — checking whether each prop value is === to the previous one.

If every prop is equal, React skips re-rendering that component entirely and reuses the previous render output. If any prop changed, the component re-renders as normal.

const Child = React.memo(function Child({ label }) {
  console.log("Child rendered");
  return <p>{label}</p>;
});

Without memo vs With memo

Consider a parent component with a counter and a child that just displays a label. Every time the counter updates, the parent re-renders — and without memo, the child re-renders too, even though its label prop never changes.

function Child({ label }) {
  console.log("Child rendered");
  return <p>Label: {label}</p>;
}

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      <Child label="Static Label" />
    </div>
  );
}

Child rendered
Child rendered
Child rendered
Child rendered   (once on mount, then once per click)

Now wrap Child in React.memo. Since its label prop never changes, React skips re-rendering it on every click:

const Child = React.memo(function Child({ label }) {
  console.log("Child rendered");
  return <p>Label: {label}</p>;
});

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      <Child label="Static Label" />
    </div>
  );
}

Child rendered   (only once, on the initial mount)

Custom Comparison Functions

The default shallow comparison works well for most cases, but sometimes you need custom logic — for example, ignoring a prop that changes often but does not affect the rendered output. React.memo accepts an optional second argument: a function that receives the previous and next props and returns true if they should be treated as equal (skip re-render).

const Child = React.memo(
  function Child({ user, lastSeen }) {
    return <p>{user.name}</p>;
  },
  (prevProps, nextProps) => {
    // Only re-render if the user's name actually changed;
    // ignore lastSeen updates entirely.
    return prevProps.user.name === nextProps.user.name;
  }
);

The New Function/Object Prop Trap

React.memo's shallow comparison checks object and function props by reference. If the parent creates a brand-new function or object literal on every render — which is the default behavior for inline arrow functions and object literals in JSX — that prop will never be === to the previous one, and memo will never be able to skip the render.

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {/* New arrow function created on every Parent render! */}
      <Child onClick={() => console.log("clicked")} />
    </div>
  );
}

Child rendered
Child rendered
Child rendered   (memo has no effect — onClick is a new function every time)

To actually benefit from memo here, the function passed down needs a stable reference across renders. That is exactly what useCallback (and useMemo for object props) provides, as covered in the earlier Hooks lessons.

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

  const handleClick = useCallback(() => {
    console.log("clicked");
  }, []); // stable reference across renders

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

Child rendered   (only once — onClick stays the same reference, so memo can skip re-renders)

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

React.memo gives you a simple way to skip re-rendering components whose props have not changed, which you saw demonstrated with a Child component that stopped re-rendering once wrapped in memo. You also saw how new function/object props can silently defeat this optimization, and how useCallback fixes that.

Next, you will look at code splitting, a technique for breaking your app's JavaScript bundle into smaller pieces that load on demand.