state-management

This skill provides a structured framework for managing frontend application state, offering architectural guidance on when and how to implement various patterns. It is designed for frontend developers and architects working on React or Vue applications who need to maintain clean, performant, and scalable codebases. By categorizing state into Local, Shared, Server, Global, and URL types, it helps teams choose the right tool for the job, minimizing complexity and avoiding common pitfalls like unnecessary re-renders or stale data.

• Categorizes state into five distinct layers: Local UI, Shared UI, Server, Global App, and URL state.

• Offers detailed implementation patterns for TanStack Query (formerly React Query) including basic queries, mutations, and optimistic updates.

• Provides robust global state management templates using Zustand for React and Pinia for Vue, complete with performance-optimizing selectors and computed properties.

• Includes best practices for URL-based state synchronization, ensuring shareable and bookmarkable application states.

• Features decision-making logic for choosing between simple component-level useState, context-based providers, and external libraries.

• Use this skill when architecting new features to determine if data belongs in a global store, a server cache, or component state.

• Input: Context regarding the stateful data (e.g., API response, theme, or form input) and the framework in use (React/Vue).

• Output: Recommended implementation approach, code patterns, and architectural justifications.

• Practical constraint: Focuses on modern industry-standard libraries; developers should evaluate library bundlesize versus the complexity of their state management needs. Always use performance-optimized selectors (e.g., shallow comparison in Zustand) to prevent unnecessary component re-renders when managing global stores.