zustand-expert_skill

Overview

This skill packages senior-level guidance for building scalable, SSR-safe Zustand v5 stores in React 19 and Next.js 16.1+ apps. It focuses on preventing request-scoped state leakage, preserving hydration integrity, and applying the Slices Pattern for large codebases. The content targets engineers designing high-performance, type-safe client and server interactions.

How this skill works

I describe concrete architectures and patterns: per-request stores via a StoreContext provider to avoid singletons in Next.js, atomic selectors with useSyncExternalStore for performance, and manual rehydration control using persist middleware and skipHydration. The material includes middleware recommendations (immer, custom logging), migration strategies for persisted schemas, and testing tips for predictable SSR behavior.

When to use it

• Building Next.js apps that render on the server and must avoid shared user state across requests
• Scaling a monolithic Zustand store into maintainable domain slices across teams
• Improving hydration performance and removing UI flicker on first paint
• Migrating legacy Zustand setups to v5 with stronger TypeScript guarantees
• Implementing persistence with deterministic rehydration timing to meet LCP budgets

Best practices

• Never export a single create(...) store for SSR; create per-request stores injected via React Context
• Use the Slices Pattern to split domain logic and combine stores with typed interfaces
• Prefer atomic selectors (state.x) and native useSyncExternalStore to minimize re-renders
• Apply persist with skipHydration and explicit rehydrate control to avoid hydration mismatch
• Use immer or immutable updates for complex nested state and write focused middleware for telemetry

Example use cases

• Auth + session stores scoped per request to prevent cross-user data leaks on server renders
• E-commerce product and cart slices combined into a typed root store with isolated selectors
• Progressive rehydration: show skeleton UI while persisted data rehydrates below 100ms LCP
• Schema migrations for persisted state with versioned transforms and fallback handling
• Testing store behavior in SSR flows using Vitest or Jest with mocked per-request providers