Гонки в интерфейсе
Вопрос
Что такое гонка запросов в UI и как её лечить?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
ответы приходят не в том порядке, в котором ушли запросы
поздний ответ на старый запрос затирает актуальные данные
лечение первое: отмена предыдущего через AbortController
лечение второе: игнорировать ответ, если запрос устарел - флаг или счётчик
в useEffect флаг ставится в замыкании и сбрасывается в очистке
библиотеки серверного состояния решают это за тебя
Что могут спросить следом
- Почему флага alive достаточно, если отмена недоступна
- Как это выглядит в кастомном хуке поиска
- Что если ответы нужно не отбрасывать, а склеивать
Разбор
Гонка возникает, когда пользователь быстро меняет ввод: уходит три запроса, а ответы приходят в произвольном порядке. Последний пришедший ответ может относиться к первому запросу - и затрёт правильные данные.
Два рабочих лечения. Отменять предыдущий запрос через AbortController. Или помечать
запрос устаревшим:
useEffect(() => {
let alive = true;
load(q).then((r) => { if (alive) setData(r); });
return () => { alive = false; };
}, [q]);
Библиотеки серверного состояния (react-query, SWR) делают это из коробки - это одна из главных причин их брать.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.