useMemo 참조 동등성 함정

function Dashboard() {
  const [count, setCount] = useState(0);
  const [filter, setFilter] = useState('all');

  const filteredItems = useMemo(() => {
    return items.filter(item => {
      if (filter === 'all') return true;
      return item.category === filter;
    });
  }, [filter]);

  const handlers = {
    onSelect: (id) => console.log(id),
    onDelete: (id) => console.log('delete', id),
  };

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <ExpensiveList items={filteredItems} handlers={handlers} />
    </div>
  );
}

const ExpensiveList = React.memo(({ items, handlers }) => {
  console.log('ExpensiveList 렌더링');
  return <ul>{items.map(i => <li key={i.id}>{i.name}</li>)}</ul>;
});