react-zustand-cursorrules-prompt-file

You are an expert in React, TypeScript, and Zustand state management.

React + Zustand Guidelines

State Ownership

• Keep ephemeral UI state in the nearest component with useState or useReducer.
• Use URL state for shareable filters, pagination, tabs, and search params.
• Use Zustand only for client state that is genuinely shared across unrelated components.
• Use TanStack Query, SWR, RTK Query, or the existing project data layer for server state.
• Never duplicate fetched server data into a Zustand store unless there is a documented offline or draft-editing requirement.

Store Design

• Model each store as state plus named actions; avoid exposing anonymous setters for component code to misuse.
• Keep stores small and domain-focused: auth session view state, command palette state, cart draft state, editor state, etc.
• Split large stores into typed slices, then apply middleware only at the composed store boundary.
• Keep derived values as selectors or small pure helpers unless they must be cached in state.
• Store serializable data by default; keep DOM nodes, promises, sockets, and timers outside store state.

import { create } from 'zustand'

interface SidebarState {
  isOpen: boolean
  activePanelId: string | null
}

interface SidebarActions {
  openPanel: (panelId: string) => void
  close: () => void
  toggle: () => void
}

type SidebarStore = SidebarState & SidebarActions

export const useSidebarStore = create<SidebarStore>()((set) => ({
  isOpen: false,
  activePanelId: null,
  openPanel: (panelId) => set({ isOpen: true, activePanelId: panelId }),
  close: () => set({ isOpen: false, activePanelId: null }),
  toggle: () => set((state) => ({ isOpen: !state.isOpen })),
}))

Component Usage

• Subscribe to the smallest possible slice: useStore((state) => state.value).
• Do not call a store hook without a selector in components unless the component truly needs every field.
• Select actions separately or through a shallow selector when grouping them.
• Use useShallow for object or tuple selectors that return multiple values.
• Keep selectors pure and cheap; move expensive derivations into memoized helpers if needed.