Первое состояние

В конце прошлого урока страница не менялась: React не знал, что переменная likes изменилась, а при каждой новой отрисовке она начиналась бы снова с 0. Исправляет это состояние — значение, которое React хранит для компонента. Его создают с помощью useState:

import { useState } from "react";

export default function App() {
    const [likes, setLikes] = useState(0);

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

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

Теперь каждый клик добавляет 1, и страница это показывает. Разберём по строкам:

• useState — функция React. Импортируйте её в начале файла, в фигурных скобках, как импортируют именованные экспорты.
• useState(0) даёт компоненту состояние, которое начинается с 0. Она возвращает массив из двух элементов, которые вы деструктурируете в константы: likes — текущее значение и setLikes — функция, которая его меняет. Имена выбираете вы. Обычно их называют something и setSomething.
• setLikes(likes + 1) сообщает React новое значение. После этого React отрисовывает компонент снова: вызывает App() ещё раз, и на этот раз useState(0) возвращает 1, потому что начальное значение используется только в первый раз. В JSX теперь ♥ 1, и React меняет абзац на странице.

Порядок всегда один: событие, обработчик, который вызывает сеттер (функцию, меняющую состояние), новая отрисовка с новым значением и страница, которая его показывает. Саму страницу вы никогда не меняете.

Функции React, названия которых начинаются с use, например useState, называются хуками. Вызывайте их в самом начале компонента, до всего остального, и никогда внутри if, цикла или обработчика. С другими хуками вы познакомитесь позже в курсе.

Типичные ошибки:

• likes = likes + 1 или likes++ в обработчике. likes — константа, поэтому консоль пишет TypeError: Assignment to constant variable. А будь она не константой, React всё равно не узнал бы об изменении. Состояние меняет только сеттер.
• Нет import для useState. Страница остаётся пустой, а консоль пишет ReferenceError: useState is not defined.