managing-state
Managing State in React/TypeScript Applications
Decision Table: When to Use Each Pattern
| Pattern | Use Cases | Examples |
|---|---|---|
| Global Zustand Stores | Business logic, CRUD, domain state | useProductStore, useAuthStore |
| Atomic Zustand Stores | Component UI state, local behavior | useProductCardStore, modal state |
| React Context | Framework integration, component tree | ThemeProvider, EditionProvider |
| URL State (nuqs) | Shareable/bookmarkable state | Pagination, filters, search |
| Form State (RHF + Zod) | Complex forms with validation | Auth forms, data entry |
| React useState | Simple local UI state (1-2 values) | Toggle, open/close |
Quick Decision Guide
- Need to share across components? -> Zustand
- Need URL persistence? -> nuqs
- Form with validation? -> React Hook Form + Zod
- Framework/library integration? -> Context
More from quick-brown-foxxx/coding_rules_ts
testing-react-ts
React/TypeScript testing with Vitest and Playwright: philosophy, component tests, integration tests, e2e tests, test infrastructure. Use when writing tests or setting up test infrastructure. ALWAYS load this for working with tests in react.
2writing-react-ts-code
Core React/TypeScript standards: strict typing, Result-based error handling, component patterns, code style. Use when writing or editing any React/TypeScript code. ALWAYS load this skill before working with any react code.
2building-ui-components
UI component patterns: shadcn/ui, component organization, variant system. Use when building or modifying React UI components. ALWAYS load this skill when working with react code.
2building-api-clients
Type-safe API clients: HTTP client, Zod validation, Result pattern, Swagger codegen. Use when creating API integrations or working with backend services. ALWAYS load this skill when working with APIs in react clients
2setting-up-nextjs-projects
Next.js project setup: directory structure, configuration, tooling, environment validation. Use when bootstrapping new projects or understanding project layout.
2