Zustand and TanStack Query: The Dynamic Duo That Simplified My React State Management

import { create } from 'zustand'interface FilterState {  selectedCategory: string  sortOrder: 'asc' | 'desc' | ''  setSelectedCategory: (category: string) => void  setSortOrder: (order: 'asc' | 'desc' | '') => void}// The entire store in one hook — no Provider, no boilerplateexport const useFilterStore = create<FilterState>()((set) => ({  selectedCategory: '',  sortOrder: '',  setSelectedCategory: (selectedCategory) => set({ selectedCategory }),  setSortOrder: (sortOrder) => set({ sortOrder }),}))// Consuming in any componentfunction SortControl() {  const sortOrder = useFilterStore((s) => s.sortOrder)  const setSortOrder = useFilterStore((s) => s.setSortOrder)  return <select value={sortOrder} onChange={(e) => setSortOrder(e.target.value)} />}

// ❌ Subscribes to the entire store — re-renders on any changeconst state = useFilterStore()// ❌ Creates a new object every render → infinite re-rendersconst { category } = useFilterStore((s) => ({ category: s.selectedCategory }))// ✅ Atomic selector — only re-renders when selectedCategory changesconst category = useFilterStore((s) => s.selectedCategory)// ✅ Multiple values: use useShallow for shallow comparisonimport { useShallow } from 'zustand/react/shallow'const { category, sortOrder } = useFilterStore(  useShallow((s) => ({    category: s.selectedCategory,    sortOrder: s.sortOrder,  })))

import { create } from 'zustand'import { persist, createJSONStorage } from 'zustand/middleware'export const useAppStore = create<AppState>()(  persist(    (set) => ({      theme: 'light' as 'light' | 'dark',      sidebarOpen: false,         // ← we don't want to persist this      setTheme: (theme) => set({ theme }),      toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),    }),    {      name: 'app-preferences',      storage: createJSONStorage(() => localStorage),      // partialize: only persist what makes sense across sessions      partialize: (s) => ({ theme: s.theme }),    }  ))// ⚠️ In Next.js with SSR: guard access behind a hydration flag// since localStorage doesn't exist on the server.

// store/slices/filterSlice.tsexport const createFilterSlice = (set) => ({  selectedCategory: '',  sortOrder: '' as SortOrder,  setSelectedCategory: (selectedCategory: string) => set({ selectedCategory }),  setSortOrder: (sortOrder: SortOrder) => set({ sortOrder }),})// store/slices/uiSlice.tsexport const createUISlice = (set) => ({  theme: 'light' as Theme,  modalOpen: false,  setTheme: (theme: Theme) => set({ theme }),  openModal: () => set({ modalOpen: true }),  closeModal: () => set({ modalOpen: false }),})// store/index.ts — middlewares here, never in the slicesexport const useBoundStore = create<BoundStore>()(  persist(    devtools((...a) => ({      ...createFilterSlice(...a),      ...createUISlice(...a),    })),    { name: 'app-store', partialize: (s) => ({ theme: s.theme }) }  ))

// queries/productKeys.tsexport const productKeys = {  all: ['products'] as const,  lists: () => [...productKeys.all, 'list'] as const,  list: (filters: ProductFilters) => [...productKeys.lists(), filters] as const,  details: () => [...productKeys.all, 'detail'] as const,  detail: (id: number) => [...productKeys.details(), id] as const,}// Hierarchical invalidation: invalidates everything starting with ['products']queryClient.invalidateQueries({ queryKey: productKeys.all })// Invalidates only lists (not individual details)queryClient.invalidateQueries({ queryKey: productKeys.lists() })// Invalidates only a specific product's detailqueryClient.invalidateQueries({ queryKey: productKeys.detail(42) })

// Window focus refetching: when the user returns to the tab, stale data is revalidated// Active by default — only disable globally if you have a real reasonconst queryClient = new QueryClient({  defaultOptions: {    queries: {      staleTime: 1000 * 60 * 2,       // data is fresh for 2 minutes      refetchOnWindowFocus: true,      // default — keep it active      refetchOnReconnect: true,        // revalidates on internet reconnect    },  },})// Polling: periodic refetch, conditional via functionuseQuery({  queryKey: productKeys.detail(jobId),  queryFn: () => fetchJobStatus(jobId),  refetchInterval: (query) => {    // Stop polling when the job is done    if (query.state.data?.status === 'complete') return false    return 2_000 // every 2s while pending  },})

const { isPending, isFetching, isError, data, error } = useQuery({  queryKey: productKeys.list(filters),  queryFn: () => fetchProducts(filters),})// isPending: query has no cached data yet (first load)// isFetching: queryFn is executing — includes background refetches// isLoading: shorthand for isPending && isFetching (active first load)// Correct v5 pattern:if (isPending) return <Spinner />          // no data yetif (isError) return <ErrorAlert>{error.message}</ErrorAlert>// TypeScript now knows data is definedreturn (  <>    {isFetching && <SubtleRefetchIndicator />}  // subtle background feedback    <ProductGrid products={data} />  </>)

function useUpdateProduct() {  const queryClient = useQueryClient()  return useMutation({    mutationFn: (product: Partial<Product> & { id: number }) =>      api.products.update(product),    onMutate: async (updatedProduct) => {      // 1) Cancel in-flight refetches to prevent race conditions      await queryClient.cancelQueries({ queryKey: productKeys.lists() })      // 2) Snapshot the previous state (for rollback)      const previousProducts = queryClient.getQueryData(productKeys.list(filters))      // 3) Optimistically update the cache      queryClient.setQueryData(productKeys.list(filters), (old: Product[]) =>        old.map((p) => (p.id === updatedProduct.id ? { ...p, ...updatedProduct } : p))      )      return { previousProducts }    },    onError: (_err, _vars, context) => {      // 4a) Roll back on error      queryClient.setQueryData(productKeys.list(filters), context?.previousProducts)    },    onSettled: () => {      // 4b) Always revalidate with the server — success OR error      // Use onSettled, not onSuccess, to guarantee resync even after rollback      queryClient.invalidateQueries({ queryKey: productKeys.lists() })    },  })}

// 1) store/useFilterStore.ts — Zustand holds user preferencesexport const useFilterStore = create<FilterState>()(  persist(    (set) => ({      selectedCategory: '',      sortOrder: '' as SortOrder,      setSelectedCategory: (selectedCategory) => set({ selectedCategory }),      setSortOrder: (sortOrder) => set({ sortOrder }),    }),    { name: 'product-filters' } // preferences survive page reloads  ))// 2) hooks/useProducts.ts — bridge between Zustand and TanStack Queryexport function useProducts() {  // useShallow prevents re-renders when other store fields change  const { selectedCategory, sortOrder } = useFilterStore(    useShallow((s) => ({      selectedCategory: s.selectedCategory,      sortOrder: s.sortOrder,    }))  )  return useQuery({    // Filters are part of the key — cache per filter combination    queryKey: productKeys.list({ category: selectedCategory, sort: sortOrder }),    queryFn: () => fetchProducts({ category: selectedCategory, sort: sortOrder }),    staleTime: 1000 * 60 * 2,    // Keep previous data visible while new data loads    placeholderData: (prev) => prev,  })}// 3) ProductList.tsx — component consuming both libs via hooksfunction ProductList() {  const { data, isPending, isFetching, isError, error } = useProducts()  const setCategory = useFilterStore((s) => s.setSelectedCategory)  if (isPending) return <Spinner />  if (isError) return <ErrorAlert>{error.message}</ErrorAlert>  return (    <>      <CategorySelector onChange={setCategory} />      {isFetching && <SubtleRefetchIndicator />}      <ProductGrid products={data} />    </>  )}

src/  store/    index.ts                # useBoundStore with all slices    slices/      filterSlice.ts        # UI filters      uiSlice.ts            # theme, modals, sidebar  queries/    productKeys.ts          # query key factory    useProducts.ts          # useQuery + Zustand filters    useProductMutations.ts  # useMutation with optimistic update  components/    ProductList.tsx         # consumes useProducts()    FilterPanel.tsx         # consumes useFilterStore()  lib/    queryClient.ts          # QueryClient with defaultOptions