Решение: useState в React не обновляет состояние сразу

Быстрый ответ

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

const [value, setValue] = useState(initialValue);
// 🚫 Новое значение `value` ещё не доступно
setValue(newValue);

// ✅ Вот где происходит волшебство: `useEffect` реагирует на обновление `value`
useEffect(() => {
  // Здесь нужно использовать обновлённое значение `value`
}, [value]);

Если вам требуется мгновенный доступ к переменной без перерисовки компонента, примените useRef:

const valueRef = useRef(initialValue);

// Обновляем ref
valueRef.current = newValue;
// ✅ Теперь `valueRef.current` содержит актуальные данные

Почему обновление useState не происходит мгновенно?

React работает по принципу реконсилиации и рендеринга. Вызов useState подразумевает запрос на рендер в React. Однако апдейт отображения происходит только к следующей итерации исполнения.

Так же как вы не встаёте ночью для того, чтобы перекрасить стены, React не вносит изменения мгновенно. Он ждёт "утра", чтобы все "отделочные работы" были выполнены оптимально.

Используйте useEffect, чтобы отслеживать изменения, а если нужно связать предыдущее значение со следующим, используйте функцию обратного вызова в setValue:

setValue(prevValue => {
  // здесь `prevValue` соединяется с `newValue`
  return newValue;
});

От useState к useReducer

Для более сложной логики состояния рекомендуется переходить к useReducer – это похоже на переход с велосипеда на мотоцикл.

const [state, dispatch] = useReducer(reducer, initialState);

Множество изменений состояния? Сложные запросы к данным? Объедините их с помощью Promise.all и контролируйте обновления через useRef.

Визуализация

Вот пример визуализации процесса обновления состояния через useState:

Процесс обновления useState:
- 🚂 Предварительная подготовка (вызов setState)
- 🚦 Ожидание (группировка изменений)
- 🛤️ Применение (следующий рендер)

Вы инициируете изменение (setState), React координирует его с другими изменениями (группировка изменений), и результат появится в следующем рендере компонента.

Реализация обновлений состояния: Стратегии для нетерпеливых

Временная переменная (tempValue):

let tempValue = 'временное значение';

// Меняем и немедленно используем!
tempValue = 'обновлённое значение';

Подробнее об этом расскажет наш спикер на видео

Искусство использования useEffect:

useEffect(() => {
  //Здесь происходит волшебство обновлений!
}, [value, otherDependency]); // Зависимости – ключ к эффективности!

Избегание путаницы с closure:

const handleSomething = useCallback(() => {
  // Теперь можно использовать текущее состояние и пропсы непосредственно
}, [value, otherDependency]);

Дуэт useReducer и useContext:

Применение useContext позволяет избежать "проброса" пропсов. Отправьте состояние в "мировое турне"!

Полезные материалы

1. Документация по хуку состояния – React — "Дневник React", где открыто делятся секретами useState.
2. В чём разница между функциональными и классовыми компонентами? — Дэн Абрамов разъясняет вопросы по теме setState.
3. Событийный цикл: микрозадачи и макрозадачи — Полное руководство по событийному циклу.
4. Почему setState в React.js асинхронен? – Stack Overflow — Обсуждение темы асинхронности setState.
5. Документация по хуку эффекта – React — Все тонкости работы с useEffect.
6. useState в React: полное руководство – LogRocket Blog — Исчерпывающий гид по теме useState и useEffect.
7. Справочник по API хуков – React — Справочник по API с примерами функциональных обновлений.