state-management
State Management
Choose the right state solution for each use case.
Activation Conditions
- Managing global state
- Persisting state across navigation
- Cross-component data sharing
- Questions about Zustand vs React Query
Quick Reference
| Action | Rule |
|---|---|
| Read from store | use-zustand-selectors.md |
| Persist state | use-zustand-persist.md |
| Fetch server data | use-react-query-for-server.md |
Decision Tree
Is it server data (API response)?
├── Yes → React Query / Connect Query
│ (caching, refetching, invalidation)
└── No → Is it URL state?
├── Yes → React Router
│ (search params, path params)
└── No → Is it form state?
├── Yes → React Hook Form
│ (validation, submission)
└── No → Is it shared across components?
├── Yes → Zustand
│ (global, persisted)
└── No → useState / useReducer
(local component state)
Rules
See rules/ directory for detailed guidance.
More from redpanda-data/console
react-best-practices
Client-side React performance optimization patterns.
72tanstack-router-migration
Migrate React applications from React Router to TanStack Router with file-based routing. Use when user requests: (1) Router migration, (2) TanStack Router setup, (3) File-based routing implementation, (4) React Router replacement, (5) Type-safe routing, or mentions 'migrate router', 'tanstack router', 'file-based routes'.
61code-standards
TypeScript, React, and JavaScript best practices enforced by Ultracite/Biome.
55security-scan
Resolve npm dependency vulnerabilities detected by security scans.
49api-patterns
Connect Query patterns for API calls. Use when working with mutations, queries, or data fetching.
48e2e-tester
Write and run Playwright E2E tests for Redpanda Console using testcontainers. Analyzes test failures, adds missing testids, and improves test stability. Use when user requests E2E tests, Playwright tests, integration tests, test failures, missing testids, or mentions 'test workflow', 'browser testing', 'end-to-end', or 'testcontainers'.
45