TanStack Query
Тема дорожной карты · Frontend разработчик
TanStack Query (ранее React Query) — это отраслевой стандарт для управления серверным состоянием в React-приложениях: обработка получения данных, кэширования, фоновой синхронизации и инвалидации кэша, чтобы разработчикам не приходилось реализовывать эти механизмы вручную. Хук useQuery получает и кэширует данные с настраиваемыми опциями staleTime и gcTime, тогда как useMutation обрабатывает операции записи и предоставляет коллбэки onSuccess/onError для инвалидации кэша через queryClient.invalidateQueries. TanStack Query интегрируется с любым асинхронным источником данных — REST API, GraphQL или прямые обращения к базе данных в Next.js Server Components, — а панель DevTools предоставляет живой просмотр всех запросов, их статус кэша и поведение при обновлении. В TypeScript React-проектах обобщения TanStack Query (useQuery<Data, Error>) обеспечивают сквозную типобезопасность от функции получения данных до потребляющего компонента, устраняя необходимость в ручных приведениях типов.
Как это работает
TanStack Query начинается с локального state компонента (useState); как только двум компонентам нужны те же данные — поднимайте к общему родителю. Для app-wide state выбирайте по сложности: Context API (встроенный, редкие изменения), Zustand (минимальный API, один store, селекторы), Redux Toolkit (предсказуемые reducers, devtools, RTK Query для server state), Jotai/Recoil (atom-based, fine-grained реактивность). Server state (данные с API) — в TanStack Query или SWR, не в глобальном store.
Когда применять
По умолчанию useState + lifting state up; библиотека — только когда prop drilling переваливает 3+ слоя или perf требует селекторов. Zustand — для новых проектов: минимальный API. Redux Toolkit — когда команда знает Redux или нужен RTK Query. Всегда разделяйте server state (TanStack Query) и client state (Zustand/Redux). Для форм react-hook-form — де факто стандарт.
Типичные ошибки
Ловушки TanStack Query: весь state в Redux, когда local state хватает (бойлерплейт без пользы); server-fetched данные в Redux вместо TanStack Query (плохо переизобретаете кеш); чрезмерный Context (ререндер всех consumer на любое изменение); селекторы, всегда возвращающие новый объект (ломают мемоизацию). Прочтите "common mistakes" каждой библиотеки до принятия.