react-state-management

Define React state management patterns for local, global, and server state.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/mfang0126/language-arts --skill react-state-management-mfang0126
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-state-management
Source: https://github.com/mfang0126/language-arts/tree/main/.opencode/skills/react-state-management
Command: npx skills add https://github.com/mfang0126/language-arts --skill react-state-management-mfang0126

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Managing React state across components and data sources can become error-prone and hard to scale.

Core Features & Use Cases

  • Patterns for Local, Global, and Server state, including Redux Toolkit, Zustand, Jotai, and React Query.
  • Guidance for when to choose each pattern and how to migrate from legacy approaches.
  • Use Case: Build a small dashboard that demonstrates UI state, remote data caching, and optimistic updates.

Quick Start

  1. Create a React project and install necessary libraries (redux toolkit, react-redux, zustand, jotai, react-query).
  2. Initialize a store using your preferred approach and wrap your app with the provider.
  3. Implement a simple example showing local state in a component, global state with a store, and server state with React 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 choose the right React state management library for my project?

To standardize React state management, evaluate whether your data is local, global, or server state. This approach provides decision criteria to guide selection among Redux Toolkit, Zustand, Jotai, and React Query for scalable applications.

What's the best way to migrate from legacy Redux to modern React state patterns?

Migrating from legacy Redux involves adopting standardized patterns for global and server state. This guide provides decision criteria and migration steps to transition legacy implementations into modern Redux Toolkit and React Query setups.

When should I use React Query versus Zustand for state management?

Use React Query for server state involving remote data caching and optimistic updates, and Zustand for global UI state. This guide defines specific patterns and decision criteria to separate server and global state effectively.

How do I implement optimistic updates with React Query and global state?

Implement optimistic updates by combining React Query for remote data caching with a global store like Zustand or Redux Toolkit. This guide provides concrete examples for building dashboards that demonstrate UI state and optimistic updates.

Do I need to install all state management libraries to start standardizing my React app?

You do not need to install all libraries initially. Start by initializing a store with your preferred approach, wrapping your app with the provider, and implementing a simple example across local, global, and server state.