React.memo Guide

React.memo is a higher-order component that memoizes functional components, preventing unnecessary re-renders when props haven't changed.

Basic Usage#

import { memo } from 'react';

// Without memo - re-renders when parent re-renders
function ExpensiveList({ items }) {
  console.log('ExpensiveList rendered');
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// With memo - only re-renders when items changes
const MemoizedList = memo(function ExpensiveList({ items }) {
  console.log('MemoizedList rendered');
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
});

// Usage
function Parent() {
  const [count, setCount] = useState(0);
  const items = useMemo(() => [{ id: 1, name: 'Item 1' }], []);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      <MemoizedList items={items} />
      {/* MemoizedList won't re-render when count changes */}
    </div>
  );
}

How memo Works#

// memo performs shallow comparison of props
const User = memo(function User({ name, age, settings }) {
  console.log('User rendered');
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
});

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

  // Primitive props - stable between renders
  const name = 'John';  // Same reference
  const age = 30;       // Same value

  // Object prop - NEW reference each render!
  const settings = { theme: 'dark' };

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
      {/* User re-renders because settings is new object! */}
      <User name={name} age={age} settings={settings} />
    </div>
  );
}

// Fix with useMemo
function ParentFixed() {
  const [count, setCount] = useState(0);

  const settings = useMemo(() => ({ theme: 'dark' }), []);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
      {/* Now User doesn't re-render on count change */}
      <User name="John" age={30} settings={settings} />
    </div>
  );
}

Custom Comparison Function#

// Provide custom comparison
const User = memo(
  function User({ user, onUpdate }) {
    console.log('User rendered');
    return (
      <div>
        <p>{user.name}</p>
        <button onClick={onUpdate}>Update</button>
      </div>
    );
  },
  // Custom areEqual function
  (prevProps, nextProps) => {
    // Return true if props are equal (skip re-render)
    // Return false if props are different (re-render)
    return (
      prevProps.user.id === nextProps.user.id &&
      prevProps.user.name === nextProps.user.name
    );
  }
);

// Deep comparison (use carefully - can be expensive)
import isEqual from 'lodash/isEqual';

const DeepComparedComponent = memo(
  function Component({ data }) {
    return <div>{JSON.stringify(data)}</div>;
  },
  (prevProps, nextProps) => isEqual(prevProps, nextProps)
);

Common Pitfalls#

// PITFALL 1: New object/array props
function Parent() {
  return (
    // ❌ New array created each render
    <MemoizedList items={[1, 2, 3]} />

    // ✓ Use useMemo or define outside
    <MemoizedList items={useMemo(() => [1, 2, 3], [])} />
  );
}

// PITFALL 2: Inline function props
function Parent() {
  return (
    // ❌ New function each render
    <MemoizedButton onClick={() => console.log('clicked')} />

    // ✓ Use useCallback
    <MemoizedButton onClick={useCallback(() => console.log('clicked'), [])} />
  );
}

// PITFALL 3: Children prop
function Parent() {
  return (
    // ❌ Children are new elements each render
    <MemoizedWrapper>
      <Child />
    </MemoizedWrapper>
  );
}

// ✓ Memoize children too
const MemoizedChild = memo(Child);
function Parent() {
  return (
    <MemoizedWrapper>
      <MemoizedChild />
    </MemoizedWrapper>
  );
}

// PITFALL 4: Context changes
const ThemeContext = createContext();

const MemoizedComponent = memo(function Component({ name }) {
  const theme = useContext(ThemeContext);
  // Re-renders when theme changes, regardless of memo!
  return <div className={theme}>{name}</div>;
});

Memoizing with Callbacks#

function Parent() {
  const [items, setItems] = useState([]);

  // ✓ Stable callback reference
  const handleDelete = useCallback((id) => {
    setItems(prev => prev.filter(item => item.id !== id));
  }, []);

  // ✓ Stable callback with item dependency
  const handleUpdate = useCallback((id, data) => {
    setItems(prev =>
      prev.map(item =>
        item.id === id ? { ...item, ...data } : item
      )
    );
  }, []);

  return (
    <ul>
      {items.map(item => (
        <MemoizedItem
          key={item.id}
          item={item}
          onDelete={handleDelete}
          onUpdate={handleUpdate}
        />
      ))}
    </ul>
  );
}

const MemoizedItem = memo(function Item({ item, onDelete, onUpdate }) {
  console.log(`Item ${item.id} rendered`);
  return (
    <li>
      {item.name}
      <button onClick={() => onDelete(item.id)}>Delete</button>
    </li>
  );
});

When to Use memo#

// ✓ USE memo when:

// 1. Component renders often with same props
const FrequentlyRenderedChild = memo(function Child({ data }) {
  return <div>{data}</div>;
});

// 2. Component has expensive rendering
const ExpensiveComponent = memo(function Expensive({ items }) {
  const processed = items.map(item => {
    // Heavy computation
    return complexCalculation(item);
  });
  return <ul>{processed.map(p => <li key={p.id}>{p.value}</li>)}</ul>;
});

// 3. Parent re-renders frequently but child props are stable
function FastParent() {
  const [count, setCount] = useState(0);
  const stableData = useMemo(() => ({ id: 1 }), []);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <MemoizedChild data={stableData} />
    </div>
  );
}

// ❌ DON'T use memo when:

// 1. Props change on every render anyway
function AlwaysChanging({ timestamp }) {
  return <div>{timestamp}</div>;
}

// 2. Component is simple/cheap to render
function SimpleText({ text }) {
  return <span>{text}</span>;
}

// 3. It makes code significantly more complex
// (premature optimization)

Nested Memoization#

// Memoize at multiple levels
const App = memo(function App() {
  const [filter, setFilter] = useState('');
  const [sort, setSort] = useState('name');

  return (
    <div>
      <MemoizedHeader />
      <MemoizedFilters
        filter={filter}
        setFilter={setFilter}
        sort={sort}
        setSort={setSort}
      />
      <MemoizedContent filter={filter} sort={sort} />
      <MemoizedFooter />
    </div>
  );
});

const MemoizedHeader = memo(function Header() {
  // Only renders once
  return <header>My App</header>;
});

const MemoizedFilters = memo(function Filters({
  filter, setFilter, sort, setSort
}) {
  // Renders when filter or sort changes
  return (
    <div>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      <select value={sort} onChange={e => setSort(e.target.value)}>
        <option value="name">Name</option>
        <option value="date">Date</option>
      </select>
    </div>
  );
});

Debugging Memoization#

// Add logging to understand re-renders
const MemoizedComponent = memo(
  function Component({ data }) {
    console.log('Component rendered', data);
    return <div>{data.name}</div>;
  },
  (prevProps, nextProps) => {
    const areEqual = prevProps.data === nextProps.data;
    console.log('Props comparison:', {
      prev: prevProps.data,
      next: nextProps.data,
      areEqual
    });
    return areEqual;
  }
);

// Use React DevTools Profiler
// - Highlights components that re-rendered
// - Shows why component re-rendered
// - Measures render duration

// why-did-you-render library
import whyDidYouRender from '@welldone-software/why-did-you-render';

if (process.env.NODE_ENV === 'development') {
  whyDidYouRender(React, {
    trackAllPureComponents: true
  });
}

Best Practices#

When to Memoize:
✓ Expensive rendering
✓ Frequent parent re-renders
✓ Stable props (primitives, memoized values)
✓ Part of a list with many items

Props Stability:
✓ Use useMemo for objects/arrays
✓ Use useCallback for functions
✓ Extract constants outside component
✓ Pass primitives when possible

Custom Comparison:
✓ Only when default comparison fails
✓ Keep comparison fast
✓ Avoid deep comparison for large objects
✓ Document why custom comparison is needed

Avoid:
✗ Memoizing everything
✗ New objects/functions in props
✗ Ignoring context changes
✗ Complex comparison functions

React.memo prevents unnecessary re-renders by memoizing functional components. It performs shallow prop comparison by default, so ensure object and function props have stable references using useMemo and useCallback. Use memo when components are expensive to render or have stable props while parents re-render frequently. Avoid over-optimization - profile first, then memoize where it matters.