Zustand v5 Atomic State & Clean Selectors Standard

--- description: Zustand v5 Atomic State & Clean Selectors Standard - Production Zustand v5 patterns: use atomic selector hooks to prevent unnecessary re-renders, avoid giant monolithic stores, and strictly enforce immutable state mutations. globs: src/store/**/*.{ts,tsx}, store/**/*.{ts,tsx} alwaysApply: false verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/zustand-v5-state" --- # Zustand v5 Atomic State & Clean Selectors Standard > **Severity**: HIGH | **Category**: frontend > **Anti-Pattern Warning**: AI calls useStore() without selectors causing the entire component tree to re-render on every state change. ## System Constraints You are an expert in React client state management using Zustand v5. Always consume state via atomic selectors to avoid excessive re-renders. Use action functions defined inside the store. ## Strict Guidelines - Always pass a selector function: useStore((state) => state.prop) instead of extracting the whole state object. - Store action functions should be co-located with state slices. - Never mutate nested state directly; use Immer middleware or object spread for clean immutable updates. ## Bad vs Good Implementations ### Zustand Atomic Selector vs Full Store Extraction #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Subscribing to the entire store causes this component to re-render whenever any unrelated property changes. ```tsx // Anti-pattern: Rerenders whenever ANYTHING in the store changes! function CartCount() { const store = useCartStore(); // Extracts everything! return <span>{store.items.length}</span>; } ``` #### Production Standard (Correct) > **Standard**: Subscribes solely to items.length, only re-rendering when the item count actually changes. ```tsx // Production Standard: Atomic Selector function CartCount() { const count = useCartStore((state) => state.items.length); return <span>{count}</span>; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Zustand v5 Atomic State & Clean Selectors Standard

Zustand v5 Atomic State & Clean Selectors Standard defines an industrial-grade behavioral standard for frontend engineering. Production Zustand v5 patterns: use atomic selector hooks to prevent unnecessary re-renders, avoid giant monolithic stores, and strictly enforce immutable state mutations. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: AI calls useStore() without selectors causing the entire component tree to re-render on every state change. Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	AI calls useStore() without selectors causing the entire component tree to re-render on every state change.	High	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Always pass a selector function

Always pass a selector function: useStore((state) => state.prop) instead of extracting the whole state object.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.

Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.

Store action functions should be co-located with state slices.

Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.

Never mutate nested state directly

Never mutate nested state directly; use Immer middleware or object spread for clean immutable updates.

Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.

Technical Questions & Answers

Frequently Asked Technical Questions

Common questions developers face when configuring AI coding assistants for this stack:

Q:Why is Zustand v5 Atomic State & Clean Selectors Standard critical for AI coding assistants?

Production Zustand v5 patterns: use atomic selector hooks to prevent unnecessary re-renders, avoid giant monolithic stores, and strictly enforce immutable state mutations. Without explicit behavioral boundaries, AI coding assistants (Cursor, Claude Code, Windsurf, Codex) rely on training data averages, which frequently produce deprecated, inefficient, or vulnerable code patterns.

Q:How does adopting this rule prevent AI hallucinations?

This rule explicitly declares what the AI must avoid (AI calls useStore() without selectors causing the entire component tree to re-render on every state change.) and prescribes verified positive examples. Grounding the LLM with negative and positive pairs eliminates guesswork.

Q:Which AI coding environments are supported?

This specification is multi-platform compatible: Cursor (.cursor/rules/*.mdc & .cursorrules), Anthropic Claude Code (CLAUDE.md), Windsurf (.windsurfrules), Codex / Cline (AGENTS.md), and GitHub Copilot (.github/copilot-instructions.md).

Q:Can I combine this rule with other technology stacks?

Yes. Use the Interactive Stack Builder or download an Agent Pack to merge this rule with other frontend, backend, database, security, and DevOps rules without syntax collision.