skills.rest
PMDevSolutions
PMDevSolutionsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

state-management

Guide React state management with tool selection and implementation patterns.

7|1|Updated Mar 11, 2026
Search Tags:#react#zustand#state-management#tanstack-query#server-state#ui-state#url-state
One-click install
npx skills add https://github.com/PMDevSolutions/Aurelius --skill state-management-pmdevsolutions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: state-management
Source: https://github.com/PMDevSolutions/Aurelius/tree/main/.claude/skills/state-management
Command: npx skills add https://github.com/PMDevSolutions/Aurelius --skill state-management-pmdevsolutions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the guesswork and common pitfalls of implementing state management in React apps, preventing issues like prop drilling, stale server data, unnecessary re-renders, and unmaintainable state architecture that slow down development and degrade user experience.

Core Features & Use Cases

  • State Type Decision Tree: Guides you to select the optimal state solution (useState, Zustand, TanStack Query, URL state, React Hook Form) based on whether state is local UI, global UI, server-fetched, URL-synced, or form-related.
  • Production-Ready Implementation Patterns: Includes step-by-step setup guides, store structure examples, custom hook patterns, and testing strategies for all supported state tools.
  • Anti-Pattern Avoidance: Explicitly lists common mistakes (such as storing API data in local state, overusing React Context for frequently changing values, or creating monolithic state stores) and their correct, performant alternatives. Use this Skill when building a new React app, debugging state-related performance issues, or migrating from legacy state libraries like Redux to modern, lightweight solutions.

Quick Start

Ask the AI to implement state management for your React app, specifying if you need global UI state, server data caching, URL-based filters, or form handling to receive a tailored, production-ready setup.

Frequently Asked Questions about 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 solution for my app?▼

Choosing React state management requires categorizing state into local UI, global UI, server-fetched, URL-synced, or form-related. A state type decision tree guides you to select useState, Zustand, TanStack Query, URL state, or React Hook Form accordingly.

What is the best way to stop unnecessary re-renders in React?▼

To stop unnecessary re-renders in React, avoid overusing React Context for frequently changing values and prevent monolithic state stores. Adopting production-ready implementation patterns with Zustand ensures optimized rendering performance.

Why does my React app have stale server data after fetching?▼

Stale server data in React occurs when storing API data in local state. Server state should be managed with TanStack Query to handle caching, background updates, and data synchronization correctly rather than using useState.

How do I migrate from Redux to modern React state management?▼

Migrating from Redux to modern React state management involves replacing monolithic stores with Zustand for global UI state and TanStack Query for server-fetched data, ensuring clear separation of state types and testable logic.

Can I use TanStack Query for all state in my React application?▼

TanStack Query should not be used for all state in React applications. It is designed specifically for server state; local UI state should use useState, while global UI state requires tools like Zustand for optimal performance.

When should I not use React Context for state management?▼

You should not use React Context for state management when dealing with frequently changing values, as it triggers re-renders across all consumers. Global UI state is better handled by Zustand to avoid performance bottlenecks.

Related Skills

Explore More Software Engineering Skills→
marcioaltoemarcioaltoe
14

frontend-engineer

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

Community
Advanced
rahulgupta2018rahulgupta2018

react-frontend-architect

Design and review React and Next.js application architecture with feature-based module boundaries.

Community
Advanced
mgd34msumgd34msu
6

state-management

Guide state architecture decisions for TanStack Query, Zustand, React Hook Form, and URL patterns.

Community
Intermediate
nccasianccasia

react-state-management

Guide modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.

Official
Advanced