skills.rest
lemu
lemuCOMMUNITY
Explore all skills by this author →
GitHub

react-state-management

Provides React state patterns for local, global, and server contexts using Redux Toolkit, Zustand, Jotai, and React Query with TypeScript types.

Updated Oct 22, 2025
Search Tags:#typescript#react#zustand#state-management#react-query#jotai#redux-toolkit
One-click install
npx skills add https://github.com/lemu/sea-prototype-template --skill react-state-management-lemu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-state-management
Source: https://github.com/lemu/sea-prototype-template/tree/main/.agents/skills/react-state-management
Command: npx skills add https://github.com/lemu/sea-prototype-template --skill react-state-management-lemu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralize and simplify state management in React by providing patterns for local, global, and server state to improve consistency and maintainability.

Core Features & Use Cases

  • Patterns for Local State (useState, useReducer), Global State (Redux Toolkit, Zustand, Jotai), and Server State (React Query).
  • Guidance for selecting the right tool based on project size and complexity, migration paths from legacy patterns, and best practices with TypeScript typings.
  • Real-world scenarios include large dashboards with server-synced data, form-heavy apps, and feature flags-driven UI.

Quick Start

Install and wire up the chosen pattern, then implement a simple shared store and a server-synced query.

Frequently Asked Questions about react-state-management

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

FAQPage Schema
How do I manage React state across local, global, and server contexts?▼

Manage React state across contexts by separating concerns: use useState for local UI, Zustand or Redux Toolkit for global state, and React Query for server synchronization to ensure predictable architecture.

What's the best way to choose between Redux Toolkit, Zustand, and Jotai for global state?▼

Choose between Redux Toolkit, Zustand, and Jotai based on project size and complexity, leveraging Redux Toolkit for large scalable apps needing strict architecture, while Zustand and Jotai offer lighter global state management for smaller components.

How do I separate client and server state with TypeScript types in React?▼

Separate client and server state by using React Query to handle server synchronization and data fetching, while managing UI state with Zustand or useReducer, applying TypeScript types across both domains for maintainable architecture.

Does this React state management approach work for migrating from legacy patterns?▼

Yes, this approach supports migration paths from legacy patterns by providing structured guidance to transition existing state logic into modern Redux Toolkit, Zustand, Jotai, or React Query implementations using proper TypeScript typings.

Can I use React Query for server state in large dashboards with server-synced data?▼

Yes, React Query is designed for large dashboards with server-synced data, handling data fetching, caching, and synchronization while keeping server state distinct from local and global client state managed by other libraries.

Related Skills

Explore More Software Engineering Skills→
1337hero1337hero
1

frontend-philosophy

Codify React/Preact conventions for scaffolding, components, state, and reviews.

Community
Advanced
VoTruongDanhVoTruongDanh

react-performance

Profile React apps with React DevTools and optimize re-renders and bundle size.

Community
Intermediate
msichtermanmsichterman

vercel-composition-patterns

Refactor React component libraries by replacing boolean props with composition patterns.

Community
Advanced
b4r7xb4r7x

react-usecontext

Guide React Context API usage for state management and performance.

Community
Intermediate