React State Architecture & Store Selection Matrix (Zustand vs Jotai vs Context)
Evaluate whether to use Zustand, Jotai, TanStack Query, or native React Context based on state frequency and scope.
Compatibility & Specs
Compatible AI Models
ClaudeChatGPTGemini
Last UpdatedOct 3, 2026
Customizable Variables3 parameters
Main Prompt Template
174 words • 1328 characters
You are a Principal Frontend Architect. I need to establish a definitive State Management Architecture for a growing React/Next.js application.
Application Overview & Complexity:
[app_overview]
State Categories Involved (Server Cache, Form Drafts, UI Modals, Audio/Canvas State):
[state_categories]
Team Skill Level & Development Velocity Constraints:
[team_constraints]
Provide an exhaustive State Management Architectural Decision Blueprint:
1. State Taxonomy Breakdown: Categorize our application state into the 4 Modern State Quadrants:
- Server State (remote cache, mutations, stale-while-revalidate)
- URL / Routing State (filters, pagination, shareable search params)
- Local Component State (accordion toggles, inputs)
- Global Client State (cart items, user preferences, active modal queue)
2. Store Engine Comparison (Zustand vs. Jotai vs. Redux Toolkit vs. React Context): Evaluate candidates against our specific state categories with explicit pros and cons.
3. Definite Recommendation & Architecture Spec: Recommend the exact stack combination (e.g. TanStack Query + Zustand + URL state) with code boilerplate demonstrating store creation and selector subscription.
4. Strict Team Rules of Engagement: 3 non-negotiable rules preventing developers from dumping server cache into global client stores.
Tip:Variables marked in purple brackets can be tailored below.
Customize Prompt
Fill in the variables below. Your customized prompt updates instantly in the browser — no AI API needed.
Parameters (3)* Indicates required field
[app_overview]
What the application does and its scale
[state_categories]
Types of data being handled
[team_constraints]
Experience level and desire for boilerplate
3 parameters active
Live Customized OutputLive Preview
246 wordsYou are a Principal Frontend Architect. I need to establish a definitive State Management Architecture for a growing React/Next.js application.
Application Overview & Complexity:
A multi-step B2B financial dashboard where users configure multi-tiered payroll batches, edit inline employee salary tables, toggle complex tax deduction modals, and export PDF summaries.
State Categories Involved (Server Cache, Form Drafts, UI Modals, Audio/Canvas State):
1. Server data (employee directory, tax rates from API). 2. Multi-step batch payroll draft that must persist across page refreshes. 3. URL filter parameters (department, location). 4. Ephemeral UI states (active slider drawers, toast notifications).
Team Skill Level & Development Velocity Constraints:
4 full-stack developers; need strict TypeScript type inference with minimal boilerplate; strictly avoid Redux boilerplate.
Provide an exhaustive State Management Architectural Decision Blueprint:
1. State Taxonomy Breakdown: Categorize our application state into the 4 Modern State Quadrants:
- Server State (remote cache, mutations, stale-while-revalidate)
- URL / Routing State (filters, pagination, shareable search params)
- Local Component State (accordion toggles, inputs)
- Global Client State (cart items, user preferences, active modal queue)
2. Store Engine Comparison (Zustand vs. Jotai vs. Redux Toolkit vs. React Context): Evaluate candidates against our specific state categories with explicit pros and cons.
3. Definite Recommendation & Architecture Spec: Recommend the exact stack combination (e.g. TanStack Query + Zustand + URL state) with code boilerplate demonstrating store creation and selector subscription.
4. Strict Team Rules of Engagement: 3 non-negotiable rules preventing developers from dumping server cache into global client stores.
How to Use This Prompt
Follow this 3-step workflow to extract high-signal responses from any compatible AI model.
01
1. Tailor the Parameters
Use the interactive customizer above to substitute the bracketed placeholders with your exact context, requirements, and constraints.
02
2. Send to AI Model
Copy the prompt and paste it into Claude, ChatGPT, Gemini, or Copilot. These models follow structured multi-step constraints reliably.
03
3. Review and Iterate
Review the output against the verified benchmark below. Follow up in the conversation to stress-test edge cases or refine tone.
Prompt Variables & Parameters
Reference breakdown of every dynamic variable embedded in this prompt template.
| Placeholder | Parameter Name | Type | Status | Description & Guidance |
|---|---|---|---|---|
| [app_overview] | Application Overview | textarea | Required | What the application does and its scaleDefault: A multi-step B2B financial dashboard where users configure multi-tiered payroll batches, edit inline employee salary tables, toggle complex tax deduction modals, and export PDF summaries. |
| [state_categories] | State Categories Involved | textarea | Required | Types of data being handledDefault: 1. Server data (employee directory, tax rates from API). 2. Multi-step batch payroll draft that must persist across page refreshes. 3. URL filter parameters (department, location). 4. Ephemeral UI states (active slider drawers, toast notifications). |
| [team_constraints] | Team Constraints | text | Required | Experience level and desire for boilerplateDefault: 4 full-stack developers; need strict TypeScript type inference with minimal boilerplate; strictly avoid Redux boilerplate. |
Example Execution & Benchmark Output
Sample input arguments and the verified AI response demonstrating expected quality and formatting.
Sample VariablesInputs
[app_overview]
A multi-step B2B financial dashboard where users configure multi-tiered payroll batches, edit inline employee salary tables, toggle complex tax deduction modals, and export PDF summaries.
[state_categories]
1. Server data (employee directory, tax rates from API). 2. Multi-step batch payroll draft that must persist across page refreshes. 3. URL filter parameters (department, location). 4. Ephemeral UI states (active slider drawers, toast notifications).
[team_constraints]
4 full-stack developers; need strict TypeScript type inference with minimal boilerplate; strictly avoid Redux boilerplate.
Expected AI ResponseVerified Result
### State Architecture Blueprint
#### 1. The 4 State Quadrants
- **Server State (TanStack Query):** Employee directories and tax rates. Managed entirely with `useQuery` / `useMutation`. Zero custom Redux/Zustand reducers for fetching.
- **URL State (`nuqs` or Next.js `useSearchParams`):** Department filters, sorting, and pagination. Keeps URLs bookmarkable and back-button functional.
- **Draft / Multi-Step Session State (Zustand + `persist`):** The payroll batch draft. Persisted to `sessionStorage` with automatic rehydration.
- **Local Ephemeral State (`useState`):** Dropdown open/closed states.
#### 2. Why Zustand Wins Over Context & Redux
- **Zero Context Re-render Cascades:** Zustand allows components to subscribe to atomic slice selectors (`usePayrollStore(s => s.totalGrossPay)`). Components only re-render when their specific slice changes.
- **No Provider Wrapping:** Zustand stores can be read and written outside React components (e.g. inside background sync workers or utility functions).
```typescript
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
interface PayrollDraftState {
batchId: string | null;
items: Record<string, number>; // employeeId -> hours
setHours: (id: string, hours: number) => void;
resetDraft: () => void;
}
export const usePayrollStore = create<PayrollDraftState>()(
persist(
(set) => ({
batchId: null,
items: {},
setHours: (id, hours) =>
set((state) => ({ items: { ...state.items, [id]: hours } })),
resetDraft: () => set({ batchId: null, items: {} }),
}),
{ name: 'payroll-draft-storage' }
)
);
```
Best Use Cases
Scenarios and roles where this prompt produces maximum leverage.
Engineering leads architecting greenfield frontend applications
Teams migrating away from legacy Redux boilerplate to modern lightweight state
Developers designing multi-step checkout or application wizard workflows
Tips for Best Results
Techniques to elevate response fidelity
- •Specify your exact runtime and dependency versions (e.g. Next.js 15, React 19, TypeScript 5.4) to eliminate outdated syntax hallucinations.
- •Ask the model to enumerate potential runtime failure modes, concurrency issues, or null boundary states before generating code.
- •Request idiomatic, type-safe solutions with clear unit test skeletons rather than monolithic scripts.
Common Mistakes to Avoid
Frequent failure modes and anti-patterns
- •Pasting large unformatted code dumps without indicating the specific function or error you want analyzed.
- •Deploying AI-generated code directly to production without verifying memory safety, edge cases, and security vulnerabilities.
- •Omitting architectural constraints (such as SSR vs. client component boundaries or database indexing).
Part of Curated Collections
This prompt is sequenced as part of these goal-oriented workflows
Related AI Prompts
Complementary workflows in React
Reactadvanced
Zustand & Finite State Machine Architecture Designer
Model complex asynchronous UI workflows using Zustand slices or XState finite state machines to prevent invalid UI states.
claudechatgptgemini
#state-management#zustand#state-machine
Reactadvanced
React Component Composition & Compound Component Architecture Review
Refactor bloated prop-drilling components into clean, composable compound components with flexible layouts.
claudechatgptgemini
#react#compound-components#component-architecture
Reactadvanced
React Re-render Cascade & Context API Performance Profiler
Isolate and eliminate redundant React re-render cascades caused by unmemoized Context providers and inline props.
claudechatgptgemini
#react#react-performance#re-renders