Ваш первый эффект

До сих пор ваши компоненты делали одно: возвращали то, как должна выглядеть страница. React вызывает компонент, берёт его JSX и выводит на страницу. Это отрисовка, и она повторяется при каждом изменении состояния компонента.

Но кое-что из того, что делает приложение, не относится к JSX: оно меняет заголовок вкладки браузера, запускает таймер, загружает данные с сервера или сохраняет что-то в localStorage. Всё это происходит за пределами React, а React хочет, чтобы отрисовка занималась только одним: выясняла, как выглядит страница. Поэтому такие вещи помещают в эффект: код, который React запускает после того, как отрисовал компонент и страница показала результат.

Эффект записывается с помощью useEffect. Это хук, как и useState: функция React, имя которой начинается с use и которую вызывают в начале компонента. Вы передаёте ей функцию, и React вызывает её после отрисовки компонента:

import { useEffect, useState } from "react";

export default function App() {
    const [tickets, setTickets] = useState(1);

    useEffect(() => {
        document.title = `Билеты: ${tickets}`;
    });

    return (
        <button onClick={() => setTickets((tickets) => tickets + 1)}>
            Билеты: {tickets}
        </button>
    );
}

document.title — это текст на вкладке браузера, который сначала задаёт <title> в index.html. Вот что происходит:

1. React отрисовывает App, и страница показывает кнопку Билеты: 1.
2. Затем React запускает эффект, и на вкладке тоже написано Билеты: 1.
3. Щелчок меняет состояние. React снова отрисовывает App, теперь с 2, и после этого снова запускает эффект, который задаёт новый заголовок.

Эффект всегда видит значения той отрисовки, после которой он запущен, поэтому заголовок и кнопка совпадают.

У предпросмотра нет своей вкладки, поэтому заголовка вы там не увидите. Чтобы увидеть, когда запускается эффект, выведите что-нибудь в нём с помощью console.log(): в консоли под страницей при каждом запуске появляется строка.

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

• Забыть импортировать useEffect: страница остаётся пустой, а в консоли написано ReferenceError: useEffect is not defined.
• Менять заголовок прямо в компоненте, вне эффекта. Может показаться, что это работает, но это происходит, пока React ещё выясняет, как выглядит страница, до того как она что-либо показала. Изменения за пределами React — дело эффекта.