Что такое серверное состояние и зачем нужен TanStack Query (React Query)?

Серверное состояние — данные, которые живут на сервере и лишь копируются на клиент: списки, профили, заказы. У них свои проблемы: кеш, устаревание, повторные запросы, дубли.

Что даёт TanStack Query

• Кеширование по ключу: один и тот же запрос не повторяется.
• Состояния isLoading, isError, data из коробки.
• Автоматическое обновление при возвращении на вкладку и при повторном подключении сети.
• Повторные попытки при ошибке, пагинация и бесконечные списки.
• Инвалидация и оптимистичные обновления после мутаций.

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

function Todos() {
  const qc = useQueryClient();
  const { data, isPending } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos });
  const add = useMutation({
    mutationFn: createTodo,
    onSuccess: () => qc.invalidateQueries({ queryKey: ['todos'] }),
  });
  // ...
}

Почему не Redux для запросов

Redux хранит состояние, но кеш, дедупликацию и обновления для запросов пришлось бы писать самим. Поэтому серверные данные берут в Query, а в Redux или Zustand оставляют клиентское состояние: тему, фильтры, черновики.

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

Данные сервера отличаются от состояния интерфейса. TanStack Query берёт на себя их кеш и синхронизацию.