Зміст
Коротко
У 2026 році відкрити новий React-проєкт — знову вибір із десятків «де-факто стандартів». Матеріал на Habr збирає актуальну карту екосистеми: що лишилося від 2022 року, а що поступилося місцем Vite, Next.js, Zustand і родині TanStack.
Що сталося
Автор пройшовся більш ніж по 60 бібліотеках і інструментах і розклав їх за категоріями: збірка, фреймворк, роутинг, UI, стан, форми, таблиці, тести, стилі. Головний тез: екосистема помітно змістилася за 2–3 роки.
Типова картина 2022 → 2026:
| Категорія | Було часто | Зараз частіше |
|---|---|---|
| Збірка | Webpack | Vite (або обгортки на кшталт Next) |
| Фреймворк / SSR | CRA, самопис | Next.js для full-stack і продакшену |
| Client state | Redux Toolkit | Zustand, іноді Jotai |
| Server state | ручний fetch + store | TanStack Query |
| UI | Material UI «за замовчуванням» | shadcn/ui, Radix, Mantine |
| Форми | Formik | React Hook Form, TanStack Form |
| Таблиці | ad-hoc | TanStack Table, AG Grid для важких грідів |
| Стилі | styled-components | Tailwind, CSS Modules |
Redux, MUI і Webpack нікуди не зникли — але для нового greenfield-проєкту їх усе частіше обирають свідомо, а не «бо так прийнято».
Чому це важливо
Неправильний стек на старті дорого обходиться: міграції, найм, швидкість фіч. Якщо команда за інерцією тягне Redux + CRA + Formik у 2026, ви платите за зайву складність там, де екосистема вже пропонує простіше.
Карта за категоріями допомагає:
- швидко узгодити стек у команді;
- не змішувати «legacy за звичкою» і «сучасний дефолт» без обговорення;
- підібрати інструменти під тип проєкту (SaaS-дашборд, realtime, маркетинговий сайт, внутрішня адмінка).
Регіональні вподобання та корпоративні стандарти все ще впливають — універсального «єдино вірного» набору немає.
На практиці
Розумний мінімум для нового комерційного React-проєкту в 2026 (якщо немає жорстких обмежень):
- Vite + React + TypeScript — швидкий dev і передбачувана збірка.
- Next.js — якщо потрібні SEO, SSR, API routes, деплой «все в одному».
- TanStack Query — серверні дані, кеш, інвалідація.
- Zustand (або Context для простого UI state) — без бойлерплейту Redux, поки немає дуже складної бізнес-логіки в store.
- React Hook Form + Zod — форми та валідація.
- shadcn/ui + Tailwind — UI-кіт з контролем над кодом компонентів.
Перед фінальним вибором зафіксуйте ADR на 1–2 сторінки: навіщо кожна категорія, що не беремо і чому. Це дешевше, ніж сперечатися на кожному PR.
Підсумок
React stack 2026 — не «одна правильна зв’язка», а набір свідомих дефолтів по шарах. Оригінальна стаття на Habr — гарна шпаргалка перед стартом проєкту; звіряйтеся з нею, коли знову дивитеся на порожній package.json.