Complex state management with Zustand and React Query
State architecture that separates server state and client state using Zustand + TanStack Query.
Define a clear state management strategy that eliminates unnecessary re-renders, simplifies code, and improves developer experience.
At a glance
Access
Free prompt
Open to copy without upgrading.
Prompt objective
Define a clear state management strategy that eliminates unnecessary re-renders, simplifies code, and improves developer experience.
Real use case
The startup TaskFlow uses Redux Toolkit for everything — from API data to UI state like modals and filters. The Redux bundle has grown to 180KB, components re-render 4x more than they should, and new devs take 3 weeks to understand the store.
Customize these fields first
Replace the placeholders with your own context before you run the prompt. That usually improves the first output more than adding more instructions later.
Prompt
Design a state management architecture for [PROJECT NAME], a [TYPE] application using React [VERSION] that currently relies on [CURRENT SOLUTION: Redux/Context/MobX].\\\\\\\\n\\\\\\\\n**Current Problems:**\\\\\\\\n- [DESCRIBE ISSUES: re-renders, complexity, bundle size, etc.]\\\\\\\\n- Number of actions/reducers/selectors: [NUMBER]\\\\\\\\n- Onboarding time for new devs: [DURATION]\\\\\\\\n\\\\\\\\n**1) Separation of Concerns:**\\\\\\\\n\\\\\\\\n**Server State (TanStack Query / React Query):**\\\\\\\\n- Global QueryClient configuration (staleTime, gcTime, retry)\\\\\\\\n- Custom hooks per domain: \\\\\\\\\\\\\\\\\\\\\\\`useProducts()\\\\\\\\\\\\\\\\\\\\\\\`, \\\\\\\\\\\\\\\\\\\\\\\`useUser()\\\\\\\\\\\\\\\\\\\\\\\`, \\\\\\\\\\\\\\\\\\\\\\\`useOrders()\\\\\\\\\\\\\\\\\\\\\\\`\\\\\\\\n- Mutations with optimistic updates\\\\\\\\n- Invalidation strategy (when to invalidate related queries)\\\\\\\\n- Prefetching on hover/scroll for smooth UX\\\\\\\\n- Infinite scroll with \\\\\\\\\\\\\\\\\\\\\\\`useInfiniteQuery\\\\\\\\\\\\\\\\\\\\\\\`\\\\\\\\n- Complete CRUD example with error handling\\\\\\\\n\\\\\\\\n**Client State (Zustand):**\\\\\\\\n- Domain-separated stores: \\\\\\\\\\\\\\\\\\\\\\\`useUIStore\\\\\\\\\\\\\\\\\\\\\\\`, \\\\\\\\\\\\\\\\\\\\\\\`useFilterStore\\\\\\\\\\\\\\\\\\\\\\\`, \\\\\\\\\\\\\\\\\\\\\\\`useCartStore\\\\\\\\\\\\\\\\\\\\\\\`\\\\\\\\n- Slices pattern for modularization\\\\\\\\n- Selective persistence with \\\\\\\\\\\\\\\\\\\\\\\`persist\\\\\\\\\\\\\\\\\\\\\\\` middleware (localStorage)\\\\\\\\n- DevTools integration\\\\\\\\n- Optimized selectors to prevent re-renders\\\\\\\\n- TypeScript strict mode example (type inference)\\\\\\\\n\\\\\\\\n**2) Integration Patterns:**\\\\\\\\n- How to combine data from Query + Zustand in a single component\\\\\\\\n- Derived state (computations) without re-render\\\\\\\\n- Optimistic UI: update Zustand + mutation + rollback\\\\\\\\n- Pattern for complex forms (useForm + Zustand)\\\\\\\\n\\\\\\\\n**3) Gradual Migration:**\\\\\\\\n- Phase 1: Migrate data fetching to React Query (2 weeks)\\\\\\\\n- Phase 2: Extract UI state to Zustand (1 week)\\\\\\\\n- Phase 3: Remove Redux (1 week)\\\\\\\\n- Coexistence during migration\\\\\\\\n- Regression tests\\\\\\\\n\\\\\\\\n**4) Success Metrics:**\\\\\\\\n- Expected bundle size reduction\\\\\\\\n- Re-render reduction per interaction\\\\\\\\n- Onboarding time for new devs\\\\\\\\n- Lines of boilerplate code eliminated
Open directly in an AI — the text is pre-filled:
How to use this prompt
- 1Replace the key placeholders first: PROJECT NAME, TYPE, VERSION, CURRENT SOLUTION: Redux/Context/MobX.
- 2Replace any bracketed placeholders like [this] with your own context.
- 3Add extra background information when you want more tailored results.
- 4Combine multiple prompts in one conversation when you need a richer output.
- 5Save your best-performing prompts so they are easy to reuse later.
Next best step
Open the guide first, then branch only if you still need more.
A guide for technical builders choosing between prompts, coding workflows, and agent-based implementation.
If this prompt is close but not quite right, generate variants next. If the job is recurring, move into the course library after the guide.
Related prompts
View allScalable React Component Architecture with Design System
Defines component structure, design tokens, and conventions for a scalable React/Next.js design system.
Best for
Build a reusable, consistent component architecture that accelerates frontend development and ensures visual uniformity across the entire application.
Next.js Performance Optimization with Core Web Vitals
Diagnosis and action plan to improve LCP, FID, and CLS in Next.js applications.
Best for
Identify performance bottlenecks and implement optimizations that improve Core Web Vitals to achieve green status on PageSpeed Insights.
WCAG 2.1 AA Accessibility Implementation in React Applications
Complete guide to making a React application accessible following WCAG 2.1 Level AA guidelines.
Best for
Ensure the application meets WCAG 2.1 AA accessibility requirements, complying with Brazil's Accessibility Law and expanding the audience reached.
Design system creation with Storybook, Tailwind, and visual tests
Complete Storybook setup with interactive documentation, visual tests, and CI/CD integration.
Best for
Establish a component development and documentation environment with Storybook that serves as the single source of truth for the team's design system.
Explore other prompt categories
Move sideways into adjacent libraries when the current category is not the full answer.
Free browsing stays open. Premium prompts unlock the reusable workflow layer.
Use the guides and role paths to validate the job first. Upgrade when you want the full prompt text, editable premium prompts, and the surrounding course paths in one place.
Free access
- Browse guides, role paths, and category pages.
- Preview prompts before you decide to upgrade.
- Find the right starting point without friction.
Membership access
- Unlock premium prompts and the full copy text.
- See more workflow paths and course connections.
- Keep the reusable templates in one place.
