Одной переменной мало

Пока обработчики только выводили текст. Теперь пусть клик меняет страницу: кнопка «Нравится», которая считает лайки. С тем, что вы уже знаете, число хранилось бы в переменной, а обработчик увеличивал бы его:

export default function App() {
    let likes = 0;

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

    return (
        <main>
            <h1>Совиный хор</h1>
            <p>♥ {likes}</p>
            <button onClick={handleLike}>Нравится</button>
        </main>
    );
}

Нажмите три раза, и консоль сосчитает:

1
2
3

Но на странице по-прежнему ♥ 0. Почему? React отрисовал компонент один раз: вызвал App(), функция вернула JSX, в котором likes был равен 0, и React построил из него страницу. Потом переменная изменилась, но React никто не предупредил. React не следит за вашими переменными, и страница сама не меняется. В курсе JavaScript вы бы сейчас сами записали новый textContent. В React страницу вы не трогаете: React строит её из компонентов.

И даже если бы React вызвал App() снова, это бы не помогло. Функция выполнилась бы с самого начала, и let likes = 0; снова создала бы новую переменную с 0. Переменная в компоненте живёт только пока выполняется функция, — одну отрисовку.

Значит, компоненту нужны две вещи, которых переменная дать не может:

• значение, которое React хранит от одной отрисовки до другой,
• и способ сообщить React, что значение изменилось, чтобы он отрисовал компонент снова.

Это состояние, и ему посвящён следующий урок. А пока попробуйте столкнуться с проблемой сами.