skills.rest
alejandro-technology
alejandro-technologyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

state-management

Manage client and server state with Zustand, TanStack React Query, and MMKV.

Updated Feb 27, 2026
Search Tags:#architecture#persistence#zustand#state-management#react-query#mmkv
One-click install
npx skills add https://github.com/alejandro-technology/react-native-template --skill state-management-alejandro-technology
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: state-management
Source: https://github.com/alejandro-technology/react-native-template/tree/main/.claude/skills/enforcement/state-management
Command: npx skills add https://github.com/alejandro-technology/react-native-template --skill state-management-alejandro-technology

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guides teams to implement a robust three-tier state management strategy using Zustand for global UI/state, TanStack React Query for server data, and MMKV for persistence, ensuring consistent data flow and durability across sessions.

Core Features & Use Cases

  • Three-tier state architecture: UI/global state with Zustand, server state with TanStack React Query, and persistence with MMKV.
  • Clear data flow decisions: determine where UI data, cached server data, and persisted data live within the stack.
  • Use Case: When building apps with global UI state, server data needs, and offline persistence, apply these patterns to keep data synchronized and durable.

Quick Start

Integrate Zustand for global state, connect TanStack React Query for server data, and enable MMKV persistence to start using the state-management patterns.

Frequently Asked Questions about state-management

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What's the best way to separate global state and server data in React?▼

To manage global state and server data separately, use Zustand for UI state and TanStack React Query for server state. This three-tier approach adds MMKV for persistence, ensuring durable data flow and clear separation of concerns across sessions.

How do I persist Zustand global state across app sessions?▼

You can persist Zustand global state across app sessions by integrating MMKV as the persistence layer. This three-tier architecture ensures that UI data remains durable and synchronized even when the application goes offline or restarts.

When do I need a three-tier state architecture in React?▼

You need a three-tier state architecture when building apps that require global UI state, server data synchronization, and offline persistence. This pattern uses Zustand, React Query, and MMKV to keep data predictable and durable across complex components.

Does TanStack React Query work with Zustand for state management?▼

Yes, TanStack React Query works with Zustand to separate server state from client UI state. Zustand manages global UI state while React Query handles cached server data, creating a predictable data flow with clear boundaries between the two.

How do I structure a React app with Zustand, React Query, and MMKV?▼

Structure the app by integrating Zustand for global state, connecting TanStack React Query for server data, and enabling MMKV persistence. This guides where to place state in global stores, server caches, or persistent storage for testable interactions.

Why use MMKV for React state persistence instead of other storage options?▼

MMKV provides fast persistence for global state within this three-tier architecture. It ensures data durability across sessions while maintaining clear separation between Zustand UI state and TanStack React Query server caches.

Related Skills

Explore More Software Engineering Skills→
marcioaltoemarcioaltoe
14

frontend-engineer

Set up feature-based React architecture with Zustand and TanStack tooling.

Community
Advanced
HanHan666666HanHan666666
10

flutter-managing-state

Manage Flutter app state across widgets using MVVM and Provider.

Community
Advanced
codethreadcodethread

lang-react

Move complex logic from React components into external Zustand, XState, or TanStack Query stores.

Community
Advanced
michelhaussairemichelhaussaire

react-state-management

Implement React state management patterns with Redux Toolkit, Zustand, Jotai, or React Query.

Community
Advanced