What is React.memo?

Learn to wrap a component with React.memo so it skips renders when props are equal.

What is React.memo?

React.memo is a higher-order component that wraps a component and prevents re-render as long as props don't change. Use it as const MemoCard = React.memo(Card);.

When a parent renders, normally all children render too. React.memo does a shallow comparison of props; if equal, it skips the render.

Most common use: big list items, components doing expensive computation. This lesson covers basic usage; the next lesson covers custom comparators.

Wrapping method

React.memo is used in two ways. First, with a variable: const MemoCard = React.memo(function Card({ '{ name }' }) { ... });. Second, with export: export default React.memo(Card);.

The wrapped component behaves the same as the original; it just adds a render-skip layer. When props don't change, React reuses the previous result.

Two cautions: wrapping every component hurts performance (shallow comparison also costs). Also, without useCallback/useMemo, new prop references always look different, so memo doesn't work.

Exercise Write MemoCard

Complete the skeleton. Write a component called Card; take ({ '{ name }' }) and return <div><p>{ '{ name }' }</p></div>. Then wrap with const MemoCard = React.memo(Card);. Export MemoCard.

Show example solution

import { memo } from "react";

function Card({ name }) {
  return (
    <div>
      <p>{name}</p>
    </div>
  );
}

const MemoCard = memo(Card);

export default MemoCard;

Test yourself

What does React.memo prevent?
- useEffect
- Needless renders
- CSS changes
- useState
Show answer

Needless renders — React.memo prevents needless renders.

Comparison

React.memo by default does ____ comparison.

Show answer

React.memo by default does shallow comparison.

Match the React.memo steps

React.memo

wraps
shallow

shallow
prop equal

skips
useCallback

stabilizes

Next lesson: Prop comparison

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies