managing-state

Manage client state with Zustand by using selective subscriptions to optimize re-renders. This approach ensures components only re-render when the specific state slices they depend on change, preventing performance bottlenecks.

You should not sync API data into Zustand. Use React Query for server state and Zustand for client-only state to maintain a clear separation of concerns and prevent data synchronization bugs.

The best way to structure a Zustand store is by following enforced patterns for store architecture and action patterns. This keeps global state organized and separates client-side concerns from server data.

Differentiate client state from server state when managing complex data like an e-commerce cart versus fetched product data. Keep transient UI or cart state in Zustand and API data in React Query to avoid bugs.

Syncing API data into Zustand causes performance problems because it bypasses optimized server state management and triggers unnecessary re-renders. Keeping server data in React Query prevents these syncing bottlenecks.

Use selective subscriptions in Zustand to subscribe components only to the specific state fields they need. This prevents the component from re-rendering when unrelated parts of the global state update.