Когда меняется состояние

Вот обработчик, который меняет состояние, а затем выводит его:

function handleLike() {
    setLikes(likes + 1);
    console.log(likes);
}

После первого клика страница показывает ♥ 1, а консоль выводит 0. После второго страница показывает ♥ 2, а консоль — 1. Консоль всегда отстаёт на один шаг. Неужели setLikes() работает медленно?

Нет: она вообще не меняет likes. Она и не может, ведь likes — константа этой отрисовки. setLikes(1) лишь сообщает React, что с этого момента likes будет равно 1, а React отрисовывает компонент снова, когда обработчик закончит работу. В новом вызове App() есть новая константа likes, равная 1. Но выполняющийся обработчик принадлежит старой отрисовке, где likes равно 0, и для этого обработчика оно остаётся 0 до самого конца.

Представляйте каждую отрисовку как снимок. JSX, обработчики и значения состояния в нём относятся к одному моменту, и ничто в снимке не меняется. Вызов сеттера — это просьба к React сделать новый снимок.

Когда обработчику нужно новое значение, сначала вычислите его, сохраните в константе и используйте в обоих местах:

function handleLike() {
    const newLikes = likes + 1;
    setLikes(newLikes);
    console.log(newLikes);
}

Теперь консоль выводит 1 одновременно с ♥ 1. То же и с условиями: if (likes === 10) сразу после setLikes(likes + 1) проверяет старое значение, поэтому оно срабатывает на один клик позже, чем вы ожидаете. Проверяйте newLikes.