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

Всё до этого момента было статичным: данные поступали, страница выходила, и ничто никогда не менялось. Реальные приложения помнят то, что меняется: количество лайков, открытое меню, текст в поле поиска. Эта память называется состоянием.

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

import { useState } from 'react';

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

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

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

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