React: What is the purpose of React.memo?

1const ExpensiveComponent = React.memo(({ data, onSelect }) => {
2  console.log("ExpensiveComponent rendered");
3  // Expensive computation
4  const processed = useMemo(() => {
5    return data.map(item => expensiveTransform(item));
6  }, [data]);
7
8  return (
9    <ul>
10      {processed.map(item => (
11        <li key={item.id} onClick={() => onSelect(item.id)}>
12          {item.name}
13        </li>
14      ))}
15    </ul>
16  );
17});

1const UserCard = React.memo(
2  ({ user, onClick }) => (
3    <div onClick={onClick}>
4      <h3>{user.name}</h3>
5      <p>{user.email}</p>
6    </div>
7  ),
8  (prevProps, nextProps) => {
9    // Only re-render if user.id or onClick changed
10    return (
11      prevProps.user.id === nextProps.user.id &&
12      prevProps.onClick === nextProps.onClick
13    );
14  }
15);