What is the useMemo hook and its purpose?

useMemo memoizes expensive calculations to avoid recalculating on every render. It returns a memoized value that only recalculates when dependencies change.

function ExpensiveComponent({ items, filter }) {
  const filteredItems = useMemo(() => {
    return items.filter(item => 
      item.name.includes(filter)
    );
  }, [items, filter]);
  
  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}