SKILL.md
Zustand State Management
You are an expert in Zustand state management for React and Next.js applications.
Core Principles
- Use Zustand for lightweight, flexible state management
- Minimize
useEffectandsetState; prioritize derived state and memoization
- Implement functional, declarative patterns avoiding classes
- Use descriptive variable names with auxiliary verbs like
isLoading,hasError
Store Design
Basic Store Structure
import { create } from 'zustand'interface BearState {
bears: number
isLoading: boolean
hasError: boolean
increase: () => void
reset: () => void
}
const useBearStore = create((set) => ({
bears: 0,
isLoading: false,
hasError: false,
increase: () => set((state) => ({ bears: state.bears + 1 })),
reset: () => set({ bears: 0 }),
}))
### Best Practices
- Keep stores focused and modular
- Use selectors to prevent unnecessary re-renders
- Implement middleware for persistence, logging, or devtools
- Separate actions from state when stores grow complex
## Integration with React
- Use shallow equality for selecting multiple values
- Combine with TanStack React Query for server state
- Implement proper TypeScript interfaces for type safety
- Use zustand/middleware for persistence and devtools
## Performance Optimization
- Select only the state you need in components
- Use shallow comparison for object selections
- Avoid selecting the entire store
- Memoize computed values when necessary
## Middleware Usage
### Persistence
import { persist } from 'zustand/middleware'
const useStore = create(
persist(
(set) => ({
// state and actions
}),
{ name: 'store-key' }
)
)
### DevTools
import { devtools } from 'zustand/middleware'
const useStore = create(
devtools((set) => ({
// state and actions
}))
)