> Работали ли вы с React Query? (React)

Короткий ответ

Да, работал с React Query (TanStack Query) в нескольких коммерческих проектах. Использовал для управления серверным состоянием, кэширования данных, автоматической перезагрузки (refetching) и оптимистичных обновлений. React Query значительно упрощает синхронизацию UI с сервером, избавляя от ручного управления loading/error состояниями и reduce-логики в Redux или Context.

Подробное объяснение

React Query - это библиотека для управления асинхронным состоянием, которая решает проблему синхронизации данных между сервером и клиентом. Основные концепции: queries (запросы на чтение), mutations (запросы на запись), кэширование с автоматической инвалидацией, stale time, retry, prefetching и оптимистичные обновления. В отличие от Redux или MobX, React Query не требует написания boilerplate для каждого API-вызова - достаточно определить query key и функцию-запрос. Библиотека автоматически управляет состоянием (loading, error, success), deduplicates запросы, поддерживает параллельные и зависимые запросы, а также пагинацию и infinite scroll. Для senior-разработчика важно понимать trade-offs: React Query не заменяет глобальное состояние (например, для UI-состояния), но идеально подходит для серверных данных.

На практике

В реальных проектах React Query используется для:

• Кэширования данных с настраиваемым staleTime (например, 5 минут для списка товаров, 30 секунд для курса валют).
• Автоматической перезагрузки при фокусе окна (refetchOnWindowFocus) для актуальности данных.
• Оптимистичных обновлений - мгновенное обновление UI до ответа сервера с откатом при ошибке.
• Infinite queries для ленивой подгрузки списков (например, лента новостей).
• Зависимых запросов, когда один запрос использует данные другого (например, получить профиль пользователя, затем его заказы).
• Мутаций с автоматической инвалидацией связанных query (например, после создания заказа сбросить кэш списка заказов).

Пример кода

TSX
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { fetchUser, updateUser } from './api';

// Query
function UserProfile({ userId }: { userId: string }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
    staleTime: 5 * 60 * 1000, // 5 минут
    retry: 2,
  });

  if (isLoading) return <Spinner />;
  if (error) return <Error message={error.message} />;

  return <div>{data.name}</div>;
}

// Mutation with optimistic update
function UpdateUserName({ userId }: { userId: string }) {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: (newName: string) => updateUser(userId, { name: newName }),
    onMutate: async (newName) => {
      await queryClient.cancelQueries({ queryKey: ['user', userId] });
      const previous = queryClient.getQueryData(['user', userId]);
      queryClient.setQueryData(['user', userId], (old) => ({ ...old, name: newName }));
      return { previous };
    },
    onError: (err, newName, context) => {
      queryClient.setQueryData(['user', userId], context.previous);
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['user', userId] });
    },
  });

  return <button onClick={() => mutation.mutate('New Name')}>Update</button>;
}

Как отвечать на собеседовании

Начните с чёткого утверждения, что работали с библиотекой. Затем кратко перечислите ключевые фичи, которые использовали. Упомяните, что React Query решает проблему "stale-while-revalidate" и синхронизации с сервером. Приведите конкретный пример из опыта - например, как вы настроили кэширование для дашборда с real-time данными. Подчеркните понимание trade-offs: когда использовать React Query, а когда - глобальное состояние (например, для темы или модалок). Если спросят про альтернативы (RTK Query, SWR), будьте готовы сравнить - React Query гибче в настройке кэша и лучше подходит для сложных сценариев.

Что проверяет интервьюер

Интервьюер оценивает:

• Понимание концепции серверного состояния и отличия от клиентского.
• Знание lifecycle запроса (stale, fetching, inactive, garbage collection).
• Умение настраивать кэширование под бизнес-требования (staleTime, gcTime, refetchInterval).
• Опыт с оптимистичными обновлениями и обработкой ошибок.
• Способность интегрировать React Query с существующей архитектурой (например, с React Router для prefetching).
• Понимание, когда React Query избыточен (простые приложения без серверных данных).

Типичные ошибки

• Использование React Query для UI-состояния (например, открыта модалка или нет) - это задача useState/Context.
• Неправильная настройка staleTime: слишком частое обновление (лишние запросы) или слишком редкое (устаревшие данные).
• Игнорирование query keys - непонимание, что ключи должны быть уникальными и включать все зависимости (например, ['user', userId], а не ['user']).
• Отсутствие обработки ошибок в mutations - не показывать пользователю, что запрос не удался.
• Злоупотребление глобальным queryClient.invalidateQueries без фильтрации - сброс всего кэша вместо конкретных ключей.
• Неиспользование enabled для зависимых запросов - отправка запроса без необходимых данных.