state-management-patternslisted

# State Management Patterns ## Purpose Applications suffer from bugs and performance issues when state lives in the wrong place. This skill guides teams to categorize state by its nature (UI, server, URL, global) and store it appropriately, eliminating duplication, excessive re-renders, and synchronization bugs. ## When to use - Adding new interactive features that require data persistence across views - Refactoring an app suffering from excessive re-renders - Integrating external data fetching with local UI state - Deciding where a new piece of state should live - Migrating from Redux/global store when unnecessary ## When NOT to use - Component-level prop decisions (use React Component Design skill) - Server caching strategy decisions (use Caching Strategies skill) - Real-time synchronization protocols (different concern) ## Inputs required - Existing React application with state management code - Understanding of current state locations (Redux, Context, useState) - List of state mutations and their trigger sources ## Workflow 1. **Categorize State**: Classify each state piece as: UI-only, Server, URL-driven, or Truly Global 2. **URL First**: Move ALL sort, filter, pagination, search, and tab parameters to URL search params 3. **Separate Server Cache**: Use React Query / SWR / Tanstack Query for ALL server data (never Redux) 4. **Localize UI State**: Keep form inputs, modals, toggles, tooltips in component `useState` only 5. **Identify Global**: ONLY theme, auth, and la