TanStack съедает экосистему React, и никто об этом не говорит

Если вы пишете на React и давно не пересматривали свой стек — загляните в package.json. Велика вероятность, что половина ваших зависимостей уже из семейства TanStack, а вы этого не планировали. Публикуем перевод колонки разработчика Harsh с dev.to о том, как за два года TanStack превратился из одной библиотеки в полноценную платформу, которая вытесняет Next.js, Redux и React Router.

Полгода назад я бы посмеялся над таким заголовком. TanStack? Это же ребята, которые делают React Query. Съедают экосистему? Я много лет пользовался React Query, любил его, рекомендовал всем — но воспринимал TanStack как одну библиотеку. Отличную библиотеку, не больше.

Потом я обновил проект в прошлом месяце и заметил кое-что. Я уже использовал TanStack Query, TanStack Router и TanStack Table. TanStack Form начал заменять React Hook Form в новых проектах. А TanStack Start полностью вытеснил мой Next.js-сетап. Я открыл package.json — и почувствовал странное: половина моего стека оказалась TanStack. Не потому что я так планировал, а потому что по одной библиотеке за раз, месяц за месяцем, TanStack просто становился лучшим выбором. И я шёл за лучшим выбором, не задумываясь, куда это меня ведёт.

Что сейчас вообще такое TanStack

Два года назад TanStack означал одно: React Query — лучшая библиотека для фетчинга данных в экосистеме React. Простая, мощная, решала реальную проблему. Сегодня TanStack — это восемь взаимосвязанных библиотек, которые вместе образуют полноценную фронтенд-платформу.

• TanStack Query — заменяет ручной fetch + useEffect. Стабильна, 68% использования
• TanStack Router — заменяет React Router и роутинг Next.js. Стабильна
• TanStack Table — заменяет все табличные библиотеки сразу. Стабильна
• TanStack Form — заменяет React Hook Form. Стабильна
• TanStack Start — заменяет Next.js и Remix. RC, активно растёт
• TanStack Store — заменяет Zustand и Redux. Стабильна
• TanStack DB — заменяет Firebase и Supabase-клиенты. Бета
• TanStack AI — заменяет AI SDK других вендоров. Альфа

Два года назад — одна библиотека. Сегодня — целая платформа, которая может заменить ваш фреймворк. И почему-то большинство разработчиков до сих пор спят.

Момент, который всё изменил

Восемь месяцев назад я дебажил проблему с роутингом в проекте на Next.js. Конкретно — URL search params. Это когда фильтры, пагинация и сортировка живут в URL, чтобы пользователи могли делиться ссылками, а кнопка «Назад» работала правильно.

В Next.js для этого нужно жонглировать тремя хуками:

			// The Next.js way — spread across multiple hooks
const searchParams = useSearchParams();
const router = useRouter();
const pathname = usePathname();

// Reading a filter value
const category = searchParams.get('category') ?? 'all';
const page = Number(searchParams.get('page') ?? '1');

// Updating search params
const updateFilters = (newCategory) => {
  const params = new URLSearchParams(searchParams);
  params.set('category', newCategory);
  router.push(`${pathname}?${params.toString()}`);
};
		

Работало. Но многословно. И не типобезопасно: searchParams.get('category') возвращает string | null, и TypeScript не знает, какие значения валидны. А потом я увидел, как коллега делает ровно то же самое через TanStack Router:

			// The TanStack Router way — fully type-safe, one place
const Route = createFileRoute('/products')({
  validateSearch: (search) => ({
    category: search.category as string ?? 'all',
    page: Number(search.page ?? 1),
  }),
});

// In the component — fully typed, no casting
const { category, page } = Route.useSearch();

// Updating — type-safe, can't typo the key
const navigate = Route.useNavigate();
navigate({ search: (prev) => ({ ...prev, category: 'electronics' }) });
		

TypeScript точно знал, какого типа category и page. Он упал бы при компиляции, если бы я попытался установить невалидное значение. Состояние URL и типы TypeScript были в идеальной синхронизации. Я долго смотрел на этот код, потом открыл новую ветку и начал миграцию.

Цифры — State of React 2026

Здесь история перестаёт быть моей личной и становится чем-то большим. Опрос State of React 2026 — более 3700 разработчиков, опубликован в феврале 2026 — дал показательные результаты.

Next.js, который когда-то казался стандартом для фулстек-React, широко используется, но не особо любим: 80% респондентов им пользовались, у 17% — негативное отношение, основные жалобы на избыточную сложность и слишком тесную интеграцию с главным спонсором (Vercel).

А вот цифры по TanStack Query: 68% использования, 42% позитивного отношения, 1% негативного. Один процент негатива у библиотеки, которой пользуется 68% React-разработчиков. Это ненормально хорошие цифры. Для сравнения: у Next.js в 17 раз больше негатива при примерно том же охвате. Экосистема говорит. Большинство просто пока не слушает.

Почему TanStack выигрывает

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

Философия звучит так: владей своим кодом, а не фреймворком. Каждая библиотека TanStack — headless by design, то есть без встроенного UI: она занимается логикой, а вёрстку и стили делаете вы. Нет никакого готового TanStack-компонента, который нужно подгонять под свой дизайн. Нет TanStack-стилей, с которыми нужно воевать. Нет мнения TanStack о том, как должно выглядеть ваше приложение.

Сравните это с Next.js — там ваши <Image>, шрифты, роутинг и серверное поведение контролируются фреймворком. Вы получаете мощь, но платите вендор-лок-ином. «Vendor lock-in, сложные API и слишком много шума в экосистеме Next.js — для меня это no-go», — так сформулировал один из респондентов опроса. Ответ TanStack на эту жалобу — архитектурный: это не фреймворк, а набор строительных блоков. Код — ваш, решения — ваши, а TanStack просто берёт на себя сложные части.

Ключевые библиотеки, которые стоит знать прямо сейчас

1. TanStack Query — вы наверняка уже им пользуетесь

Если вы ещё не используете TanStack Query — остановитесь и поставьте его прямо сейчас: npm i @tanstack/react-query плюс обернуть приложение в QueryClientProvider. Я подожду.

			// Before TanStack Query — the pain we all forgot
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  setLoading(true);
  fetch('/api/users')
    .then(res => res.json())
    .then(data => {
      setUsers(data);
      setLoading(false);
    })
    .catch(err => {
      setError(err);
      setLoading(false);
    });
}, []);

// After TanStack Query — this is all you need
const { data: users, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: () => fetch('/api/users').then(res => res.json()),
});
		

Кеширование, фоновые рефетчи, stale-while-revalidate (показываем старые данные, пока подгружаются свежие), оптимистичные обновления, бесконечный скролл, devtools — всё в комплекте. Это точка входа в экосистему TanStack — именно с Query начинают большинство.

2. TanStack Router — тот, который удивит больше всего

Это библиотека, которая окончательно перетянула меня на сторону TanStack. Полная сквозная типизация по всему слою роутинга — не только пути, но и search params, контекст маршрута, данные лоадеров — всё типизируется от маршрута до компонента.

			// Your routes are fully typed — everywhere
const Route = createFileRoute('/users/$userId')({
  loader: async ({ params }) => {
    // params.userId is typed as string
    return fetchUser(params.userId);
  },
  component: UserPage,
});

function UserPage() {
  const user = Route.useLoaderData();
  // user is fully typed — no casting needed
  const { userId } = Route.useParams();
  // userId is typed as string — can't typo it
}
		

Если у вас хоть раз был баг из-за того, что useParams() вернул undefined, а TypeScript не предупредил — TanStack Router и есть ответ.

3. TanStack Form — наследник React Hook Form

React Hook Form — отличная библиотека. TanStack Form — это то, чем был бы React Hook Form, если бы его писали сегодня, с TypeScript-first подходом. Никаких строковых register('email') — все имена полей проверяются типами.

			const form = useForm({
  defaultValues: {
    email: '',
    password: '',
  },
  onSubmit: async ({ value }) => {
    // value is fully typed — value.email is string, not unknown
    await loginUser(value);
  },
});

<form.Field
  name="email" // TypeScript errors if this field doesn't exist
  validators={{
    onChange: ({ value }) =>
      !value.includes('@') ? 'Invalid email' : undefined,
  }}
  children={(field) => (
    <input
      value={field.state.value}
      onChange={(e) => field.handleChange(e.target.value)}
    />
  )}
/>
		

4. TanStack Start — альтернатива Next.js, которую никто не ждал

Это самое новое и самое спорное пополнение. TanStack Start — это меньше магии и больше контроля: вы сами решаете, как грузятся данные, где они запускаются и что рендерится. Типобезопасность отличная, и Start прекрасно дружит со всей остальной экосистемой TanStack. Полноценный fullstack-фреймворк поверх TanStack Router — SSR, стриминг, server functions, всё как в Next.js, но без привязки к Vercel и с end-to-end типизацией.

			// Server function — fully type-safe, no API route needed
const getUser = createServerFn({ method: 'GET' })
  .validator((userId: string) => userId)
  .handler(async ({ data: userId }) => {
    return db.users.findById(userId);
    // Return type is inferred — available in the component
  });

// In your component — type safe end to end
const user = await getUser({ data: userId });
// user has the correct type from the server function
		

Больше не нужно гадать, что возвращает ваш API: типы текут от базы данных до компонента без единой ручной аннотации.

5. TanStack DB и AI — будущее, которое строится прямо сейчас

У TanStack есть несколько проектов на ранних стадиях: помимо стабильных Query/Router/Table/Form/Store, в бете — TanStack DB, в альфе — TanStack AI, а ещё есть TanStack CLI со встроенным MCP-сервером (Model Context Protocol) для работы с ИИ-агентами.

TanStack DB — реактивное клиентское хранилище данных: что-то вроде Firebase, но без привязки к вендору. TanStack AI — унифицированный интерфейс к разным ИИ-провайдерам: один и тот же API, независимо от того, дёргаете ли вы Claude, GPT-4 или Gemini. И то, и другое пока не прод — но они показывают, куда движется TanStack. Это уже не библиотеки, это платформа.

Честный контраргумент

Я выставил TanStack серебряной пулей. Это не так. Если ваша команда хорошо знает Redux и React Router, потеря продуктивности на изучение новых инструментов может не окупиться. У Next.js годы боевой эксплуатации на проде. Redux-разработчиков на рынке больше, чем TanStack-разработчиков, — это важно для найма. Если вам нужна скучная и предсказуемая технология, оставайтесь на привычном стеке.

Ещё один момент: если вам нужны React Server Components с полной прод-поддержкой уже сегодня — Next.js всё ещё ответ. И если ваша команда глубоко в Redux, а переход на новое означает месяцы переобучения, — цена, возможно, не оправдана. TanStack — отличный инструмент, но не всегда правильный выбор. Используйте его, когда его сильные стороны совпадают с вашими задачами.

Так стоит ли переходить

Честная рекомендация после шести месяцев жизни в экосистеме TanStack:

• Ставьте Query уже сегодня. Если вы ещё не пользуетесь — это самое выгодное по ROI изменение, которое можно сделать в React-кодбазе. Минимум риска, моментальный эффект, плюс это ворота в понимание философии TanStack
• Попробуйте Router на следующем greenfield-проекте (то есть новом, с чистого листа). Не мигрируйте существующее приложение — ценность яснее всего видна, когда вы стартуете с типобезопасности с первого дня
• Наблюдайте за Start. Он ещё не так стабилен, как Next.js. Но траектория понятна: разработчики, которые изучат его сейчас, получат заметное преимущество, когда он дойдёт до 1.0
• Следите за DB и AI. Оба слишком ранние для прода. Но они показывают амбиции команды TanStack — и, судя по её послужному списку, получатся отлично, когда будут готовы

Что всё это значит

TanStack выигрывает не потому, что маркетит себя лучше Next.js, и не благодаря виральным твитам или докладам на конференциях. Он выигрывает, потому что решает проблему, которая реально болит у React-разработчиков в 2026 году: слишком много магии, слишком много вендор-лок-ина, слишком много сложности, которая живёт не в вашем коде, а в фреймворке.

TanStack возвращает вам контроль. Полную типобезопасность. Никакого скрытого поведения. Никакой зависимости от вендора. Просто хорошо спроектированные примитивы, которые делают ровно то, что написано на коробке. В эпоху, когда ИИ пишет всё больше кода за нас, эта ясность важнее, чем когда-либо: ИИ-инструменты работают лучше с явным типизированным кодом, чем с магическими конвенциями фреймворков. TanStack не планировал съесть экосистему React. Он просто построил инструменты получше — и разработчики пошли за лучшими инструментами. Так экосистемы и меняются на самом деле — не анонсами, а пул-реквестами.

Источник: колонка TanStack is eating React's ecosystem and nobody is talking about it на dev.to. Автор: разработчик harsh2644. Перевод сокращён и адаптирован, авторские мнения сохранены.