# State Management ## Philosophy - **Server State** → TanStack Query - **Client State** → Zustand - **Form State** → React Hook Form + Zod - **URL State** → nuqs or searchParams ## TanStack Query ### Query Keys Factory ```typescript export const userKeys = { all: ['users'] as const, lists: () => [...userKeys.all, 'list'] as const, list: (filters: Filters) => [...userKeys.lists(), filters] as const, details: () => [...userKeys.all, 'detail'] as const, detail: (id: string) => [...userKeys.details(), id] as const, }; ``` ### Hooks Pattern ```typescript export function useUsers(filters?: Filters) { return useQuery({ queryKey: userKeys.list(filters ?? {}), queryFn: () => getUsers(filters), }); } export function useUser(id: string) { return useQuery({ queryKey: userKeys.detail(id), queryFn: () => getUser(id), enabled: !!id, }); } export function useCreateUser() { const queryClient = useQueryClient(); return useMutation({ mutationFn: createUser, onSuccess: () => { queryClient.invalidateQueries({ queryKey: userKeys.lists() }); }, }); } export function useUpdateUser() { const queryClient = useQueryClient(); return useMutation({ mutationFn: ({ id, data }: { id: string; data: UpdateUserInput }) => updateUser(id, data), onSuccess: (_, { id }) => { queryClient.invalidateQueries({ queryKey: userKeys.detail(id) }); queryClient.invalidateQueries({ queryKey: userKeys.lists() }); }, }); } ``` ## Zustand ### Typed Store ```typescript interface UIStore { sidebarOpen: boolean; theme: 'light' | 'dark'; toggleSidebar: () => void; setTheme: (theme: 'light' | 'dark') => void; } export const useUIStore = create((set) => ({ sidebarOpen: true, theme: 'light', toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })), setTheme: (theme) => set({ theme }), })); ``` ### Performance: Use Selectors ```typescript // CORRECT - Only re-renders when sidebarOpen changes const sidebarOpen = useUIStore((s) => s.sidebarOpen); // WRONG - Re-renders on ANY state change const { sidebarOpen } = useUIStore(); ``` ### Persist Middleware ```typescript import { persist } from 'zustand/middleware'; export const useSettingsStore = create()( persist( (set) => ({ language: 'en', setLanguage: (language) => set({ language }), }), { name: 'settings-storage', } ) ); ``` ### Computed Values with Selectors ```typescript // Create a selector const selectFilteredItems = (state: Store) => state.items.filter(item => item.active); // Use in component const filteredItems = useStore(selectFilteredItems); ``` ## Form State: React Hook Form + Zod ```typescript import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { z } from 'zod'; const schema = z.object({ name: z.string().min(1, 'Required'), email: z.string().email('Invalid email'), }); type FormData = z.infer; export function UserForm() { const { register, handleSubmit, formState: { errors } } = useForm({ resolver: zodResolver(schema), }); const onSubmit = (data: FormData) => { // data is typed and validated }; return ( ); } ``` ---