Функция-обновитель

А если обработчик вызывает сеттер несколько раз? Суперлайк должен добавлять 3 лайка:

function handleSuperLike() {
    setLikes(likes + 1);
    setLikes(likes + 1);
    setLikes(likes + 1);
}

Но добавляется только 1. Почему, вы знаете из прошлого упражнения: likes не меняется, пока работает обработчик. При likes, равном 0, обработчик три раза говорит «новое значение — 1», и React отрисовывает компонент с 1.

Когда новое значение вычисляется из старого, передайте сеттеру функцию вместо значения:

function handleSuperLike() {
    setLikes((likes) => likes + 1);
    setLikes((likes) => likes + 1);
    setLikes((likes) => likes + 1);
}

Такая функция называется функцией-обновителем. React ставит её в очередь, а при следующей отрисовке вызывает функции из очереди по порядку, передавая каждой значение, которое вернула предыдущая: 0 становится 1, 1 становится 2, а 2 становится 3. Страница показывает ♥ 3.

Параметр здесь называется так же, как состояние, но внутри стрелочной функции likes — это параметр: самое свежее значение, а не то, что в снимке. Можно назвать его иначе: (previous) => previous + 1 работает точно так же.

Когда она нужна? Фиксированное значение, например setLikes(0), не зависит от старого, поэтому передавайте само значение. Когда новое значение получается из старого, setLikes(likes + 1) часто тоже работает, но только пока ничто другое в том же обработчике не меняет это состояние. Функция-обновитель работает всегда и продолжает работать, когда обработчик усложняется. Поэтому дальше в этом курсе мы используем её всегда, когда новое значение вычисляется из старого.