Выбор ответа Middle Эффекты и жизненный цикл спрашивают часто обновлено
Гонка запросов
Вопрос
Пользователь быстро переключает профили 1 → 2. Ответ для 1 пришёл позже ответа для 2, и на экране профиль 1. Как правильно исправить?
useEffect(() => {
fetch(`/api/users/${id}`)
.then(r => r.json())
.then(setUser);
}, [id]);
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: В очистке отменять запрос (AbortController) или ставить флаг ignore. Очистка запускается при смене id, поэтому она может отменить старый запрос или пометить его ответ как устаревший.
Варианты ответа
- Убрать
idиз зависимостей, чтобы эффект не перезапускался при переключении - Заменить
useEffectнаuseLayoutEffect, чтобы запросы шли по порядку - В очистке отменять запрос (
AbortController) или ставить флагignoreправильный ответ - Добавить
awaitпередfetch, чтобы дождаться ответа на прошлый id
Разбор
Очистка запускается при смене id, поэтому она может отменить старый запрос или пометить его ответ как устаревший. Без id в зависимостях профиль вообще перестанет обновляться. useLayoutEffect не меняет порядок ответов сети. await не влияет на то, какой ответ придёт раньше.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.