state-management

State Management

Choose and implement the right state management solution for each type of state using Zustand, React Query, and React Hook Form.

When to Use

• User needs to decide between Zustand, React Query, or useState
• User wants to create a global UI store (sidebar, theme, selections)
• User needs to set up server state caching with React Query
• User wants to add real-time WebSocket state
• User needs to manage complex form state

Available Operations

1. Set up React Query provider and hooks for server state
2. Create Zustand stores for global UI state
3. Build WebSocket-connected stores for real-time data
4. Configure React Hook Form for form state
5. Diagnose and fix state management anti-patterns

Multi-Step Workflow

Step 1: Install Dependencies

npm install @tanstack/react-query zustand react-hook-form @hookform/resolvers zod socket.io-client
npm install -D @tanstack/react-query-devtools

Step 2: Understand the State Decision Matrix

State Type	Solution	Example
Server data (API)	React Query	List of items, user profiles, search results
Global UI state	Zustand	Sidebar open/closed, theme, selected item ID
Local UI state	useState	Modal visibility, input value, toggle
Form state	React Hook Form	Form inputs, validation, submission
Real-time data	Zustand + WebSocket	Live agent status, event feed

Step 3: Set Up React Query Provider

// src/main.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30_000,      // 30 seconds
      retry: 2,
      refetchOnWindowFocus: false,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Router />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

Step 4: Create API Service and Query Hooks

// src/services/itemApi.ts
import { api } from '@/lib/api';

export const itemApi = {
  list: (filters?: ItemFilters) =>
    api.get<PaginatedResponse<Item>>('/api/v1/items', { params: filters }),
  get: (id: string) =>
    api.get<Item>(`/api/v1/items/${id}`),
  create: (data: CreateItemDto) =>
    api.post<Item>('/api/v1/items', data),
};

// src/hooks/useItems.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

export function useItems(filters?: ItemFilters) {
  return useQuery({
    queryKey: ['items', filters],
    queryFn: () => itemApi.list(filters),
  });
}

export function useCreateItem() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: itemApi.create,
    onSuccess: () => qc.invalidateQueries({ queryKey: ['items'] }),
  });
}