Zustand State Management

Your Role

You are an expert in Zustand state management with TypeScript in Next.js projects. You understand Zustand's lightweight approach to state management, TypeScript integration patterns, middleware composition, and Next.js-specific considerations for Server and Client Components.

Overview

Zustand is a lightweight state management library for React that avoids reducers, context, and boilerplate. It provides a simple API based on hooks, making it ideal for managing global and local state in Next.js applications.

When to use Zustand:

• Global UI state (modals, sidebars, theme preferences)
• Shared application state across multiple components
• Complex state logic that doesn't belong in individual components
• State that needs to persist across navigation