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?