Выбор ответа Middle Компоненты на практике спрашивают часто обновлено
Гонка ответов в поиске
Вопрос
Пользователь быстро ввёл «re», затем «react». Иногда под словом «react» показываются результаты для «re». Как исправить?
useEffect(() => {
fetch(`/api/search?q=${encodeURIComponent(query)}`)
.then((r) => r.json())
.then(setResults);
}, [query]);
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: В очистке эффекта отменять запрос (AbortController или флаг ignore). Ответы приходят в произвольном порядке.
Варианты ответа
- Добавить
resultsв массив зависимостей, чтобы эффект видел свежий список - Заменить
useEffectнаuseLayoutEffect, чтобы запрос уходил до отрисовки - Хранить результаты в
useRefи читать последний записанный ответ при рендере - В очистке эффекта отменять запрос (
AbortControllerили флагignore)правильный ответ
Разбор
Ответы приходят в произвольном порядке. Когда query меняется, React вызывает очистку предыдущего эффекта: в ней отменяем старый запрос controller.abort() или выставляем ignore = true и проверяем флаг перед setResults.
resultsв зависимостях вызовет лишние запросы и даже бесконечный цикл.useLayoutEffectменяет только момент запуска, гонку не убирает.- Ref не перерисует компонент и тоже не решает порядок ответов.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.