Является ли библиотека React Query state manager

Question

Является ли библиотека React Query state manager

Тип вопроса: Библиотеки Вероятность: 10% Категория: Frontend Разработчик

Ответ

React Query — это не state manager в традиционном понимании (как Redux или Zustand). Он специализируется на управлении асинхронным состоянием (запросами, кэшированием, синхронизацией данных с сервером).

Отличия от state manager:

Не предназначен для хранения клиентского состояния (например, UI-флагов, формы).
Работает с серверными данными, автоматически обрабатывая кэш, инвалидацию, фоновые обновления.

Пример:

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

function UserProfile() {
  const { data, isLoading } = useQuery({
    queryKey: ['user'],
    queryFn: fetchUser, // Запрос к API
  });

  if (isLoading) return <div>Loading...</div>;
  return <div>{data.name}</div>;
}

Для клиентского состояния лучше комбинировать React Query с Zustand/Context.

Ответ 18+ 🔞

А, слушай, вот этот твой React Query — это же не какой-нибудь там классический стейт-менеджер, понимаешь? Это не Redux, который всё в кучу собирает, и не Zustand, который по полочкам раскладывает. Это, блядь, узкий специалист, как хирург-уролог — работает только с одной системой, но зато знает её наизусть, до каждой трубочки.

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

Чем он не является, ёпта:

Это не склад для твоего клиентского барахла. Не для UI-флагов, не для данных формы, которую пользователь заполняет. Это как пытаться в холодильник для пива запихнуть старый диван — не влезет и не надо.
Его стихия — это серверные данные. Он их кэширует, обновляет в фоне, инвалидирует, когда надо. В общем, делает всю грязную работу, чтобы ты не писал тонны однообразного кода.

Смотри, как это выглядит на практике, вот реальный кусок:

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

function UserProfile() {
  const { data, isLoading } = useQuery({
    queryKey: ['user'],
    queryFn: fetchUser, // Вот эта функция дергает твой бэкенд
  });

  if (isLoading) return <div>Грузимся, блядь...</div>;
  return <div>{data.name}</div>;
}

Видишь? Красота. Никаких своих useState для загрузки, никаких useEffect-костылей. Всё из коробки.

А если тебе нужно именно клиентское состояние — тупые флаги, настройки интерфейса — то тут React Query, как манда с ушами, бесполезен. Бери тогда Zustand или Context, и используй их вместе. Один за сервер отвечает, другой — за клиент. Идеальная пара, как водка и огурец.