Challenge: Memoized list

Write a filtered list optimized with React.memo, useMemo and useCallback.

Challenge: Memoized list

In this challenge you write a Row component wrapped in memo and a click handler fixed with useCallback.

The goal: when the parent re-renders, rows do not re-render unnecessarily. memo skips rendering when props are the same; useCallback keeps the handler reference stable.

This pair is the basic way to win performance in long lists.

Exercise MemoRow and handleClick

Write a Row component: destructure { id, onClick }, render <li onClick={() => onClick(id)}>{id}</li>. Wrap as const MemoRow = memo(Row). Write a List component: keep ids in useState([1, 2, 3]), define handleClick with useCallback (takes id, logs it, deps []). Render <ul> with ids.map(id => <MemoRow key={id} id={id} onClick={handleClick} />). export default List.

Show example solution

import { memo, useCallback, useState } from "react";

function Row({ id, onClick }) {
  return <li onClick={() => onClick(id)}>{id}</li>;
}

const MemoRow = memo(Row);

function List() {
  const [ids] = useState([1, 2, 3]);
  const handleClick = useCallback((id) => {
    console.log(id);
  }, []);
  return (
    <ul>
      {ids.map((id) => (
        <MemoRow key={id} id={id} onClick={handleClick} />
      ))}
    </ul>
  );
}

export default List;

Test yourself

When does memo skip rendering?
- When state changes
- When useEffect fires
- Always re-renders
- When props are the same
Show answer

When props are the same — memo skips rendering when props are the same.

useCallback deps

const handleClick = useCallback((id) => {
  console.log(id);
}, ____);

Show answer

const handleClick = useCallback((id) => {
  console.log(id);
}, []);

Next lesson: Challenge: Routed cart

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies