Как возникает race condition в React?

Определение

Race condition в React — это ситуация, когда порядок завершения асинхронных операций не совпадает с логическим порядком действий пользователя.

Типичный сценарий возникновения

Сначала разберём самый частый кейс — запросы, зависящие от props или state.

1. Компонент рендерится с параметром query = "a"

2. В useEffect отправляется запрос fetch("a")

3. Пользователь быстро меняет query на "ab"

4. React делает новый рендер

5. useEffect отправляет запрос fetch("ab")

6. Ответ для "ab" приходит быстро и обновляет state

7. Ответ для "a" приходит позже и перезаписывает state

Пример проблемы

useEffect(() => {
  fetch(`/api/search?q=${query}`)
    .then(res => res.json())
    .then(data => {
      setResults(data);
    });
}, [query]);

Здесь:

1. Каждый запрос независим

2. React не контролирует порядок их завершения

3. Последний завершившийся запрос “побеждает”

Почему React не может решить это сам

1. React не знает бизнес-логики запроса

2. Он не понимает, какие данные считаются актуальными

3. Асинхронность — зона ответственности разработчика

Где это особенно критично

1. Поиск по мере ввода

2. Фильтрация списков

3. Переключение вкладок

4. Компоненты с быстрыми обновлениями props

Вывод

Race condition в React возникает из-за конкуренции асинхронных запросов за обновление одного и того же состояния. Без дополнительного контроля React не может гарантировать актуальность данных.