Setup Zustand

Enforce zustand best practices via PostToolUse hooks -- double-parens create, useShallow selectors, persist middleware. Use when setting up zustand enforcement or preventing re-render issues.

redpanda-data 0e92766 4 files · 2.8 KB Updated 6 repo stars

File contents

Zustand Enforcement

What This Catches

  • Ban single-parens create<T>() -- must be create<T>()() for middleware type inference
  • Ban inline object selectors -- (s) => ({ a: s.a }) cause infinite re-renders, use useShallow
  • Ban localStorage/sessionStorage in store files -- use zustand persist middleware

Stack Decisions

  • Zustand client state only: theme, sidebar, selected tab, draft form data. Server data -> TanStack Query / Connect Query.
  • useShallow required for multi-value selectors (hook enforce).
  • Callback form required for set() (hook enforce).

Initial setup (install, config, verify): see SETUP.md.

redpanda-data/ui-harness/tree/main/setup-zustand commit 0e9276607c

Frequently asked questions

npx skillmds@latest add redpanda-data/setup-zustand