Summary - React.memo

Write a memoized list item and a useCallback parent.

Summary - React.memo

In this group you learned what React.memo is, prop comparison, and custom comparators. Now you can protect expensive components from needless renders.

The recipe: wrap big list items and expensive components with memo, stabilize function props with useCallback, stabilize object props with useMemo or module scope. Custom comparators are a last resort.

In the next step you'll write a big list example with memo'd list + useCallback.

Exercise BigList memo + callback

Complete the skeleton. Write an App component. Define items with useState(["a","b","c"]). Define handleClick with useCallback((item) => console.log(item), []). Inside <ul>, render items.map((item, i) => <li key={ '{ i }' } onClick={ '{ () => handleClick(item) }' }>{ '{ item }' }</li>). Export it.

Show example solution

import { useState, useCallback } from "react";

function App() {
  const [items] = useState(["a", "b", "c"]);
  const handleClick = useCallback((item) => console.log(item), []);
  return (
    <ul>
      {items.map((item, i) => (
        <li key={i} onClick={() => handleClick(item)}>{item}</li>
      ))}
    </ul>
  );
}

export default App;

Test yourself

Which is React.memo's default comparison?
- Shallow
- Deep
- JSON.stringify
- Ignores
Show answer

Shallow — Default is shallow compare.
Match the React.memo recipe

memo

wrap
useCallback

function
useMemo

object
custom compare

last resort

Next lesson: Project: Performance

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies