Real World Example

Each row is memoized. Passing stable handlers means toggling one task re-renders only that row, not all 500.

const TaskRow = memo(function TaskRow({ task, onToggle }) {
  return <li onClick={() => onToggle(task.id)}>{task.done ? '✅' : '⬜'} {task.title}</li>;
});

function TaskList({ initial }) {
  const [tasks, setTasks] = useState(initial);
  const onToggle = useCallback((id) => {
    setTasks((list) => list.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
  }, []);
  return <ul>{tasks.map((t) => <TaskRow key={t.id} task={t} onToggle={onToggle} />)}</ul>;
}