🧠 Skill: zustand-expert

Description

Senior state architect specializing in Zustand v5 for modern React applications. Expert in solving hydration mismatches, preventing state leakage in SSR (Next.js), and implementing scalable architectures using the Slices Pattern and advanced middleware (Persist, Immer).

Core Priorities

1. SSR Safety (Anti-Singleton): Preventing shared state between requests in Next.js by using per-request stores via React Context.
2. Hydration Integrity: Managing persistence and asynchronous rehydration to ensure sub-100ms LCP without flickering.
3. Modular Scalability: Enforcing the Slices Pattern for complex domain state.
4. Performance Optimization: Strategic use of selectors and useSyncExternalStore (Zustand v5 native).

🏆 Top 5 Gains in Zustand v5 (2026)

1. Native useSyncExternalStore: Full support for React 18/19 concurrent rendering with zero "tearing" issues.
2. Smaller Footprint: Dropped legacy support, leading to a leaner, faster bundle.
3. Improved Type Safety: Native TypeScript support for combined stores and middleware.
4. Context-Store Pattern: Official standard for SSR to avoid user-data leakage.
5. Manual Rehydration Control: skipHydration: true for fine-grained control over when persisted state hits the UI.