Как избежать дублирования запросов к одному API в дереве компонентов?

Что проверяют

Понимаете ли вы разницу между клиентским состоянием и серверными данными и знаете ли, откуда берутся дубли: несколько компонентов независимо зовут один эндпоинт в useEffect. Следом обычно спрашивают, почему в разработке запрос уходит дважды даже из одного компонента.

Как отвечать

Начните с причины: компонент со своим fetch в эффекте ничего не знает о соседях, поэтому шапка, сайдбар и карточка профиля отправят три одинаковых запроса. Дальше способы по возрастанию зрелости:

• поднять запрос выше: грузить данные в общем родителе и отдавать через props или контекст. Работает, пока дерево небольшое, но связывает компоненты;
• библиотека серверного состояния: TanStack Query, SWR, RTK Query. Одновременные запросы с одинаковым ключом склеиваются в один, результат кладётся в кеш. В TanStack Query по умолчанию staleTime: 0, и каждый новый подписчик запускает фоновый перезапрос; чтобы его не было, задайте staleTime. В SWR похожую роль играет dedupingInterval, по умолчанию 2 секунды;
• дедупликация в клиенте API: Map от ключа запроса к незавершённому промису. Второй вызов получает тот же промис, после завершения запись удаляется;
• серверные компоненты: в Next.js одинаковые fetch в рамках одного рендера мемоизируются, для остальных функций есть cache() из React.

Отдельно скажите про StrictMode: в разработке React монтирует компонент, размонтирует и монтирует снова, и эффект срабатывает дважды. Это проверка корректной очистки, в продакшен-сборке повтора нет. Лечится не отключением StrictMode, а AbortController в функции очистки или переходом на библиотеку.

Где спотыкаются

Считают, что пустой массив зависимостей в useEffect решает проблему. Он защищает только от повторов при перерисовке одного компонента, а три разных компонента всё равно сделают три запроса.

Путают дубли с частыми запросами и предлагают дебаунс. Он нужен для поиска по вводу, к одинаковым запросам из разных веток дерева отношения не имеет.

Складывают серверные данные в Redux или контекст руками и сами пишут инвалидацию, повторные попытки и флаги загрузки. Получается самодельная копия TanStack Query с багами, которых там давно нет.