Избегаем состояния гонки в React Состояние гонки описывает си | Заметки про React

Избегаем состояния гонки в React

Состояние гонки описывает ситуацию, когда поведение системы зависит от определенной последовательности событий, но их порядок неуправляем. Одним из примеров является многопоточность, когда несколько потоков пытаются изменить общие данные. Аналогичная проблема может возникнуть с асинхронностью в JavaScript.

Состояние гонки в приложениях React можно воспроизвести на примере с получением данных в useEffect. Например, при изменении зависимостей deps у useEffect запрос fetch начнет выполняться и при его успехе произойдет изменение стейта. Однако, если не отменить старый запрос fetch, то может произойти коллизия: два события пытаются изменить общие данные. 

Также, если компонент будет размонтирован и после выполнения запроса fetch произойдет изменение стейта, то будет ошибка React: Warning: Can't perform a React state update on an unmounted component.

Чтобы избежать подобных ситуаций, необходимо отменять запрос fetch, если он больше не нужен. Один из вариантов – использовать guard переменную, которая будет определять актуальность запроса. Другой вариант – использовать AbortController в fetch.

https://academind.com/tutorials/useeffect-abort-http-requests