| Pitfall | Solution | |---------|----------| | Overusing one giant store | Split into slices using composition | | Re-rendering entire component | Use fine-grained selectors | | Storing non-serializable data (Date, Map) | Use JSON serialization or ignore in persist | | Memory leaks in subscriptions | Always unsubscribe in useEffect cleanup | | Async race conditions | Use AbortController or flags | | SSR (Next.js) hydration mismatch | Use persist with skipHydration option | SSR Example with Next.js: // store.js import create from 'zustand' const useStore = create((set) => ( bears: 0, increase: () => set((state) => ( bears: state.bears + 1 )), ))

Zustand is not tied to React. You can use it in vanilla JS:

// In _app.js or layout if (typeof window === 'undefined') // Server-side: fresh store per request useStore.setState( bears: 0 )

For React integration:

// Get current state console.log(store.getState().count) // 0