modern-state-management

What problem does it solve?

This Skill provides clear patterns to manage application state effectively in Next.js, preventing common pitfalls like mixing server and client state or overusing global stores.

Core Features & Use Cases

• Server State Management: Utilizes TanStack Query for efficient fetching, caching, and synchronization of asynchronous data from your API.
• Client State Management: Employs Zustand for lean management of global UI state (e.g., theme, modal visibility).
• URL State Synchronization: Encourages using URL search parameters for shareable and bookmarkable state like filters and pagination.
• Use Case: When building a dashboard with dynamic data tables, use TanStack Query to fetch and manage the table data, and Zustand to control the visibility of a global "Add New Item" button.

Quick Start

Create a custom hook using useQuery to fetch data for a list of projects, including a status filter.