state-management

Standardize React state management across server, client, URL, and form states.

1|Updated Jul 15, 2026

Search Tags:#state management #frontend architecture #react #zod #zustand #tanstack query

Ready to run

npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill state-management-dzakiamriz22

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: state-management
Source: https://github.com/Dzakiamriz22/frontend-pack/tree/main/skills/state-management
Command: npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill state-management-dzakiamriz22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill resolves the confusion surrounding React state management by providing a clear, architectural decision framework that prevents over-engineering and ensures performant, maintainable code.

Core Features & Use Cases

Server State Handling: Implements TanStack Query for caching, refetching, and optimistic updates, eliminating manual useEffect data fetching.
State Categorization: Provides a definitive decision tree for choosing between URL params, React hooks, Zustand, or Zod-validated forms.
Use Case: When building a complex dashboard, use this skill to determine whether to store filter criteria in the URL for shareability or in a Zustand store for global UI synchronization.

Quick Start

Use the state-management skill to refactor my current data fetching logic to use TanStack Query instead of manual hooks.

Frequently Asked Questions about state-management

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

FAQPage Schema

How do I separate server state and client state in React applications?▼

To separate server and client state in React, enforce a clear architectural boundary by using TanStack Query for server data caching and refetching, while reserving Zustand for global client UI synchronization. This prevents over-engineering and eliminates manual useEffect data fetching.

When should I use URL parameters instead of Zustand for persistent UI state?▼

Use URL parameters for persistent UI state when you need shareable, bookmarkable filter criteria, such as dashboard filters. Use Zustand when state requires global synchronization across multiple components without persisting in the browser URL.

What is the best way to refactor manual useEffect data fetching to TanStack Query?▼

The best way to refactor manual useEffect data fetching is to replace it with TanStack Query hooks, which handle server state caching, background refetching, and optimistic updates natively, eliminating manual loading and error state management.

How does Zod validation work with form state in React?▼

Zod validates form state by enforcing schema-defined runtime type checking before submission, ensuring data integrity. It integrates directly with form state to prevent invalid data from propagating to server or client state layers.

Do I need a decision tree for choosing between React hooks and global state management?▼

Yes, a decision tree is necessary to determine whether local React hooks suffice for component-level state or if Zustand is required for global UI synchronization, preventing unnecessary state hoisting and ensuring maintainable frontend architecture.