zustand-mutative-pattern

To create a context-scoped Zustand store for SSR safety, provide the store via React Context instead of using a global singleton. This pattern isolates UI state across server-side rendering requests and nested UI modules, preventing cross-request state leakage.

The best way to structure actions in a Zustand store is to group all state modifications under a dedicated `actions` namespace object. This prevents mutations from scattering across root state and standardizes action-based state transitions, keeping logic predictable.

You perform deep mutative updates in Zustand by using the `mutative` function from `zustand-mutative`. This allows you to directly modify nested state structures safely without relying on brittle object spread syntax or manual immutable updates.

You should use `useShallow` when selecting multiple Zustand state properties together to prevent unnecessary re-renders. It ensures React components only re-render when the selected output actually changes, optimizing rendering performance.

To handle side-effects like toasts and network calls, emit events from your Zustand store and isolate these UI and network interactions in Sidecar components. This approach prevents impure logic from polluting the bounded store.