TanStack Query: как я убрал 40% клиентского стейта

Год назад в нашем React-проекте было ~2000 строк кода только на управление состоянием запросов: loading, error, data, refetch, cache invalidation

Сегодня — меньше 1200. Разница: TanStack Query.

Что ушло:

1. useEffect для fetch 90% случаев заменяется на useQuery. Нет race conditions, нет забытых cleanup функций.

2. useState для loading/error Встроенный isLoading, isError, isFetching. Плюс granular состояния: isPending, isStale — которых раньше вообще не было.

3. Самописный кэш staleTime + gcTime делают то, что команды строили месяцами. Запрос к /users сделан в компоненте A, перешли в B — данные мгновенно, фоновый refetch автоматически.

4. Ручная инвалидация queryClient.invalidateQueries после мутации. Один вызов — все подписанные компоненты обновились.

Что нравится больше всего: devtools из коробки. Видишь весь кэш, статусы, staleness — как Redux DevTools, но для сервер-стейта.

С Next.js App Router: useQuery для клиентского стейта, prefetch на сервере через HydrationBoundary. Данные приходят быстро, клиент только подхватывает.

Вы ещё используете useEffect для fetch? Или уже перешли на TanStack Query?

TanStack Query: как я убрал 40% клиентского стейта | Сетка — социальная сеть от hh.ru