Что такое React Query?

React Query (TanStack Query) — библиотека управления серверным состоянием: запросы, кеширование, синхронизация и обновление данных с сервера.

Главная идея

Данные с сервера — это не state, а кеш: у них есть свежесть, фоновая инвалидация, повторные запросы. Вручную это выливается в бесконечные useEffect + isLoading + error и дублирование запросов. React Query упаковывает всё в один хук:

const { data, isPending, error } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => api.getUser(userId),
});

Что даёт из коробки

• Кеш по ключам: два компонента с одинаковым queryKey делят один запрос и данные.
• Свежесть: staleTime/gcTime; устаревшие данные показываются мгновенно и обновляются в фоне (stale-while-revalidate).
• Автообновление: при фокусе окна, реконнекте, интервалом.
• Ретраи с экспоненциальной задержкой.
• Мутации с инвалидацией и оптимистичными обновлениями:

const mutation = useMutation({
  mutationFn: api.updateUser,
  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['user'] }),
});

• Пагинация, инфинит-скролл, префетч, девтулзы.

Что меняет в архитектуре

Серверные данные уходят из Redux/контекста — глобальный стор остаётся только для клиентского состояния (UI-флаги, корзина), и часто оказывается, что стейт-менеджер больше не нужен.

Нюансы

• Это не HTTP-клиент: сами запросы пишете вы (fetch/axios), библиотека управляет их жизненным циклом.
• Аналоги: SWR, Apollo Client (для GraphQL), RTK Query.

Коротко для собеседования

React Query управляет серверными данными как кешем: useQuery с ключом даёт данные, статусы, дедупликацию, фоновое обновление и ретраи; useMutation — изменения с инвалидацией кеша и оптимистичными апдейтами. Убирает ручные эффекты загрузки и выносит серверное состояние из стейт-менеджера.