Загрузка данных в эффекте
Вопрос
Как бы ты загрузил данные в компоненте через useEffect, чтобы это было корректно? И почему в реальном проекте ты, возможно, сделал бы иначе?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Зависимости: всё, от чего зависит запрос, например id
Гонки: в очистке AbortController или флаг ignore
Состояния загрузки и ошибки, AbortError не считать ошибкой
StrictMode в dev отправит запрос дважды, это нормально при корректной очистке
Нет кеша, дедупликации, повторов и предзагрузки: каждый компонент грузит сам, возникают водопады
В проекте: TanStack Query, SWR, загрузчики роутера или серверные компоненты
Что могут спросить следом
- Что такое водопад запросов и как его избежать?
- Как показать скелетон через Suspense?
- Как отменить запрос при размонтировании?
Разбор
В эффекте я завишу от параметров запроса, например id. Создаю AbortController, передаю signal в fetch, а в очистке вызываю abort(). Так при быстром переключении устаревший ответ не перезапишет свежий, и после размонтирования не будет обновления state. Отдельно держу статус загрузки и ошибку, AbortError игнорирую. В разработке StrictMode отправит запрос дважды, но первый тут же отменится, это нормально. Минусы подхода: нет кеша, при возврате на страницу данные грузятся заново, нет дедупликации одинаковых запросов, а вложенные компоненты образуют водопад, потому что ребёнок начинает загрузку только после рендера родителя. Поэтому в проекте я бы взял TanStack Query или SWR, загрузчики роутера, а в Next.js серверные компоненты, где данные грузятся до отправки HTML.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.