Усунення стану гонки (race conditions) у React за допомогою AbortController
Користувачі швидко взаємодіють із вебдодатками. Така швидкість створює дві основні проблеми для розробників.
Перша проблема — це пастка розмонтованого компонента (unmounted component). Користувач натискає кнопку, щоб отримати дані. Запит триває чотири секунди. Через дві секунди користувач натискає «назад» і залишає сторінку. Запит продовжує виконуватися у фоновому режимі. Коли дані надходять, код намагається оновити компонент, якого вже не існує. Це призводить до витоків пам'яті (memory leaks).
Друга проблема — це стан гонки (race condition). Це часто трапляється в рядках пошуку.
- Користувач вводить "A". Запускається запит 1.
- Користувач вводить "AB". Запускається запит 2.
- Запит 2 завершується першим і відображає правильні дані.
- Запит 1 завершується із запізненням і перезаписує екран застарілими даними.
Ви можете вирішити обидві проблеми за допомогою AbortController API. Цей інструмент дозволяє зупинити мережевий запит, коли він більше не потрібен.
Як це реалізувати:
- Створіть новий AbortController всередині вашого useEffect.
- Передайте signal контролера у ваш fetch-запит.
- Використовуйте блок try/catch для обробки помилок.
- Перевіряйте, чи є назва помилки AbortError, щоб ігнорувати навмисні скасування.
- Поверніть функцію очищення (cleanup function) у вашому useEffect, щоб викликати controller.abort().
Цей патерн працює, коли компонент розмонтовується або коли змінюється залежність.
Переваги цього підходу:
- Ви запобігаєте перезапису нових даних застарілими.
- Ви запобігаєте витокам пам'яті у вашому React-додатку.
- Ви звільняєте мережеві з'єднання браузера.
- Ваш додаток залишається передбачуваним і стабільним.
Джерело: https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899