Почему библиотека React Query не является state manager?

React Query: специализированный инструмент для асинхронных данных, а не менеджер состояний

React Query — это мощная библиотека для работы с асинхронным состоянием (данными с сервера), но она принципиально не позиционируется и не функционирует как полноценный менеджер состояний (state manager). Вот ключевые причины, объясняющие это различие.

1. Предназначение и область ответственности

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

• Кэшировании ответов сервера.
• Фоновом обновлении данных.
• Синхронизации состояния с сервером.
• Обработке ошибок и повторных запросов.
• Пагинации и бесконечных запросах.

Пример типичного использования:

import { useQuery } from '@tanstack/react-query';

const fetchPosts = async () => {
  const response = await fetch('/api/posts');
  return response.json();
};

function PostsComponent() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  });

  if (isLoading) return <div>Загрузка...</div>;
  if (error) return <div>Ошибка: {error.message}</div>;

  return <div>{data.map(post => <Post key={post.id} post={post} />)}</div>;
}

Здесь состояние (data, isLoading, error) управляется автоматически библиотекой и связано исключительно с результатом асинхронной операции.

2. Отсутствие управления клиентским состоянием

Клиентское состояние (состояние UI, не связанное напрямую с сервером) — это прерогатива менеджеров состояний. React Query не предоставляет удобных или рекомендуемых способов для:

• Локального состояния формы (например, значения полей ввода перед отправкой).
• Состояния модальных окон (открыто/закрыто).
• Темы приложения (светлая/тёмная).
• Сложной бизнес-логики, независимой от сервера.

Для этих целей вам понадобятся React Context, useState, Zustand, Redux или MobX.

// Пример клиентского состояния, которое НЕЛЬЗЯ эффективно управлять через React Query
const [isModalOpen, setIsModalOpen] = useState(false);
const [formInput, setFormInput] = useState('');
const [selectedFilters, setSelectedFilters] = useState({});
// Это состояние — не результат асинхронного запроса, а реакция на действия пользователя.

3. Архитектурные различия

4. Реактивность и производные состояния

Менеджеры состояний часто предоставляют мощные средства для селекторов и производных (вычисляемых) состояний (например, Reselect в Redux, или computed в MobX/Vuex). React Query не имеет встроенных механизмов для вычисления сложного клиентского состояния на основе своего кэша. Вы можете комбинировать данные нескольких запросов, но это останется в рамках асинхронного контекста.

5. Разделение ответственности на практике

В реальных приложениях React Query отлично сосуществует с менеджерами состояний, каждый решая свою задачу:

1. React Query отвечает за «серверное состояние»: данные пользователей, посты, транзакции.
2. Zustand/Redux отвечает за «клиентское состояние»: настройки интерфейса, состояние виджетов, мультишаговые формы.
3. React Context/useState — за локальное состояние компонента.

// Гипотетический компонент, использующий оба подхода
function UserProfile({ userId }) {
  // Состояние с сервера (React Query)
  const { data: user, isLoading } = useQuery({
    queryKey: ['user', userId],
    queryFn: fetchUser,
  });

  // Локальное состояние UI (useState)
  const [isEditing, setIsEditing] = useState(false);

  // Глобальное клиентское состояние (через Zustand)
  const { theme, toggleTheme } = useAppStore();

  // Комбинированная логика
  if (isLoading) return <Spinner />;
  return (
    <div className={theme}>
      <h1>{user.name}</h1>
      <button onClick={() => setIsEditing(true)}>Редактировать</button>
      <button onClick={toggleTheme}>Сменить тему</button>
      {isEditing && <EditForm user={user} />}
    </div>
  );
}

Заключение

React Query — это не state manager, а state synchronizer. Его гениальность заключается в автоматической синхронизации клиентского кэша с серверным состоянием, что снимает огромный пласт рутинной работы. Однако он не предназначен и не эффективен для управления всем многообразием состояний в клиентском приложении. Правильное понимание этой границы позволяет строить более чистую, предсказуемую и производительную архитектуру, используя React Query в тандеме с классическими инструментами управления состоянием.