moai-ref-react-patterns

# React Patterns Reference ## Target Spawn Frontend domain work spawned via `Agent(general-purpose)` with frontend instructions - Applies these patterns directly to component design and state management. ## Component Design Patterns ### 1. Compound Components Parent and child share implicit state via Context. Suited for: Tab, Accordion, Dropdown, Select Structure: `<Select>` + `<Select.Trigger>` + `<Select.Option>` ### 2. Custom Hooks (Extraction Pattern) Extract state logic into reusable hooks. Suited for: Form management, API calls, localStorage, debounce Naming: `use` prefix required - `useForm`, `useDebounce`, `useAuth` ### 3. Container/Presentational Separation Separate data logic (Container) from UI (Presentational). Suited for: Large apps, when testability is needed Container: Data fetch, state management, event handlers Presentational: Renders only from props, functionally pure ### 4. Headless Component Provides behavior/state without UI. Suited for: Design system-independent logic Examples: headless `useCombobox`, `useDialog`, `useTable` ## State Management Selection Guide | State Type | Tool | Rationale | |-----------|------|-----------| | UI Local | useState, useReducer | Component-internal | | Server State | React Query / TanStack Query | Caching, refetch, optimistic | | Global Client | Zustand | Concise, minimal boilerplate | | Complex Global | Zustand + Immer | Immutability convenience | | URL State | nuqs / useSearchParams | Filters, pagination | |...