Что такое состояние?

До сих пор всё было статичным: данные поступали на вход, на выходе получалась страница, и ничего никогда не менялось. Настоящие приложения запоминают то, что меняется: количество отметок «Нравится», открытое меню, текст в поле поиска. Эта память называется состоянием.

React предоставляет компонентам состояние с помощью хука useState:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    ...
}

Одна строка, три части:

• count: текущее значение
• setCount: функция, которая его изменяет
• useState(0): начальное значение

Золотое правило: никогда не присваивай значение состоянию напрямую. count = 5 вызывает ошибку, потому что count — это const. Даже если бы его можно было изменить, React не узнал бы об этом. setCount(5) изменяет состояние и повторно отображает компонент. Именно повторное отображение обновляет экран.