Что будет отображаться в компоненте при изменении state

Что происходит при setState

1. Обновление состояния попадает в очередь

2. React запускает новый рендер

3. JSX вычисляется заново

4. React применяет минимальные изменения к DOM

Пример

const [text, setText] = useState('A');

<button onClick={() => setText('B')} />
<p>{text}</p>

После клика:

• компонент перерендерится

• <p> отобразит "B"

Важный нюанс

1. setState асинхронен

2. В одном рендере всегда используется одно консистентное состояние

3. Старые значения недоступны в новом JSX

Частая ошибка

setCount(count + 1);
setCount(count + 1);

• итоговый count увеличится на 1, а не на 2

Вывод

Компонент всегда отображает состояние конкретного рендера, а не “частично обновлённые” значения.