До всіх тем React
React • Тематичний розділ2 сценарії

Управління станом та кешування

Архітектура Zustand, персистентність, useShallow та TanStack Query v5

Побудова клієнтського шару даних: типізовані зрізи (Slice pattern), запобігання каскадним ререндерам з useShallow та гідратація серверного стану.

Zustand v5useShallowStateCreatorСелекториPersist Middleware
Прогрес теми
0%(0 з 2 пройдено)
+100 XP~75 хв

Практичні сценарії розділу

2 сценаріїв доступно для виконання

Рівень складності:
Senior35 хв+50 XP
Архітектура глобального стану на Zustand v5: типізовані слайси, персистенція та useShallow

Построение масштабируемого клиентского хранилища на Zustand v5: паттерн StateCreator Slices, глубокая типизация без циклических зависимостей, селекторы с useShallow и гидратация LocalStorage.

React 19Zustand 5.0+TypeScript 5.8+useShallow
Наскрізний сценарійВідкрити воркфлоу
Middle40 хв+50 XP
Серверний стан та кешування з TanStack Query v5: Query Key Factory, оптимістичний UI та нескінченний скрол

Глубокий разбор управления серверным состоянием в React 19: паттерн фабрики ключей запросов (Query Key Factory) для исключения опечаток инвалидации, построение мгновенного интерфейса через оптимистичные обновления (Optimistic UI) со снимком отката, пагинация и бесконечные списки с useInfiniteQuery.

React 19TanStack Query v5TypeScript 5.8+ZodVite 6
Наскрізний сценарійВідкрити воркфлоу