state-management-expert

Design scalable React state management architectures with Redux Toolkit, Zustand, Jotai, TanStack Query, and Context API.

Updated Apr 9, 2024
One-click install
npx skills add https://github.com/nhonvo/Powershell --skill state-management-expert-nhonvo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: state-management-expert
Source: https://github.com/nhonvo/Powershell/tree/main/antigrafity-config/.agent/skills/state-management-expert
Command: npx skills add https://github.com/nhonvo/Powershell --skill state-management-expert-nhonvo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps React teams design and implement scalable, maintainable state management patterns across applications, balancing between global and local state, server state, and UI state complexities.

Core Features & Use Cases

  • Provides architectural guidance across patterns (Redux Toolkit, Zustand, Jotai, TanStack Query, and Context API) for state shape, updates, and performance.
  • Includes decision trees and playbooks to choose the right pattern based on server vs UI state, data flow, and caching needs.
  • Demonstrates concrete implementation patterns with examples for stores, selectors, and API integration in real projects.

Quick Start

Configure a scalable React state store (e.g., Redux Toolkit or Zustand) and wire it to components for predictable updates.

Frequently Asked Questions about state-management-expert

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

FAQPage Schema
How do I choose between Zustand and Redux Toolkit for React state management?

Choosing between Zustand and Redux Toolkit for React state management depends on your needs: Redux Toolkit suits complex, normalized global states, while Zustand offers a lighter API for simpler updates. Apply decision trees based on data flow and scale.

When should I use TanStack Query instead of Context API for server state?

Use TanStack Query instead of Context API for server state when you need robust API integration, caching, and data fetching. Context API is better for UI state, whereas TanStack Query manages server state to ensure maintainable logic.

What is the best way to structure a scalable React state architecture with Jotai?

The best way to structure a scalable React state architecture with Jotai is to enforce patterns for state normalization and selectors. This balances global and local state, ensuring predictable updates across component hierarchies.

How do I integrate API data fetching with Redux Toolkit stores?

You integrate API data fetching with Redux Toolkit stores by applying patterns for state normalization and selectors. This wires API integration to components for predictable updates and ensures maintainable, testable state logic.

Can I use Jotai for global state while using TanStack Query for server state in the same project?

Yes, you can use Jotai for global state and TanStack Query for server state in the same project. This architectural approach balances server and UI state complexities, applying patterns to ensure maintainable data flows.

Why does my React application suffer from performance issues when using Context API for global state?

Your React application suffers performance issues using Context API for global state because it causes unnecessary re-renders. Enforcing selector patterns or migrating to Zustand and Jotai optimizes state updates across component hierarchies.