managing-state

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.