managing-state

Selects and implements Zustand, TanStack Query, or React Context for frontend state.

1|2|Updated Feb 5, 2026

Search Tags:#performance #state management #frontend #zustand #tanstack query #react context

Ready to run

npx skills add https://github.com/7a336e6e/skills --skill managing-state

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: managing-state
Source: https://github.com/7a336e6e/skills/tree/main/frontend/managing-state
Command: npx skills add https://github.com/7a336e6e/skills --skill managing-state

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a clear strategy for managing different types of state in a frontend application, ensuring performance and maintainability by using the right tool for the job.

Core Features & Use Cases

State Decision Tree: Guides you on whether to use Zustand, TanStack Query, React Context, or local state (useState/useReducer).
Client State Management: Implements typed Zustand stores with selectors for efficient updates.
Server State Management: Utilizes TanStack Query for data fetching, caching, and mutations, including optimistic updates.
Global Static Values: Leverages React Context for infrequently changing global data like themes or internationalization settings.
Use Case: When building a new feature that requires fetching user data from an API and also maintaining a shopping cart state, this skill helps you correctly implement TanStack Query for the user data and a Zustand store for the cart.

Quick Start

Use the managing-state skill to set up a Zustand store for user authentication data.

Frequently Asked Questions about managing-state

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

FAQPage Schema

How do I manage frontend state using React Context without causing unnecessary re-renders?▼

To manage frontend state efficiently, use React Context strictly for infrequently changing global static values like themes or internationalization settings. For dynamic client state, use Zustand with selectors to isolate updates and prevent unnecessary re-renders across your application.

What's the best way to combine Zustand and TanStack Query for complex frontend state?▼

The best way to structure frontend state is by using a state decision tree: implement TanStack Query for server state like API data fetching and mutations, and use Zustand for isolated client state like shopping carts. This ensures typed, performant stores across your application.

When do I need TanStack Query for server state instead of local useState?▼

You need TanStack Query for server state when fetching, caching, or mutating API data, especially when implementing optimistic updates. Local useState should only be used for simple, component-level UI state rather than managing remote server data synchronization.

Does this state management approach work for both user authentication and shopping cart data?▼

Yes, this state management strategy handles both scenarios by separating concerns. You can use TanStack Query to fetch and cache user authentication data from an API, while simultaneously maintaining a typed Zustand store for shopping cart client state.

How to set up a Zustand store for client state management?▼

To set up a Zustand store for client state management, define your store with typed state values and implement selectors. This approach isolates state updates, allowing components to subscribe only to specific state slices and minimizing unnecessary re-renders during updates.

Why should I use a state decision tree for frontend state organization?▼

You should use a state decision tree for frontend state organization because it guides whether to use Zustand, TanStack Query, React Context, or local state for each specific data type. This ensures performance and maintainability by applying the right tool to the right problem.