Zustand + TanStack Query: La dupla poderosa para la gestión de estado en React

import { create } from 'zustand'interface FilterState {  selectedCategory: string  sortOrder: 'asc' | 'desc' | ''  setSelectedCategory: (category: string) => void  setSortOrder: (order: 'asc' | 'desc' | '') => void}// A store inteira em um hook — sem Provider, sem boilerplateexport const useFilterStore = create<FilterState>()((set) => ({  selectedCategory: '',  sortOrder: '',  setSelectedCategory: (selectedCategory) => set({ selectedCategory }),  setSortOrder: (sortOrder) => set({ sortOrder }),}))// Consumindo em qualquer componentefunction SortControl() {  const sortOrder = useFilterStore((s) => s.sortOrder)  const setSortOrder = useFilterStore((s) => s.setSortOrder)  return <select value={sortOrder} onChange={(e) => setSortOrder(e.target.value)} />}

// ❌ Assina o store inteiro — re-renderiza em qualquer mudançaconst state = useFilterStore()// ❌ Cria novo objeto a cada render → re-renderização infinitaconst { category } = useFilterStore((s) => ({ category: s.selectedCategory }))// ✅ Seletor atômico — só re-renderiza quando selectedCategory mudaconst category = useFilterStore((s) => s.selectedCategory)// ✅ Múltiplos valores: use useShallow para comparação shallowimport { 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,         // ← não queremos persistir isso      setTheme: (theme) => set({ theme }),      toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),    }),    {      name: 'app-preferences',      storage: createJSONStorage(() => localStorage),      // partialize: persiste só o que faz sentido entre sessões      partialize: (s) => ({ theme: s.theme }),    }  ))// ⚠️ Em Next.js com SSR: proteja o acesso atrás de um flag de hydration// pois localStorage não existe no servidor.

// 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 aqui, nunca nas 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,}// Invalidação hierárquica: invalida tudo que começa com ['products']queryClient.invalidateQueries({ queryKey: productKeys.all })// Invalida só as listas (não os detalhes individuais)queryClient.invalidateQueries({ queryKey: productKeys.lists() })// Invalida só o detalhe de um produto específicoqueryClient.invalidateQueries({ queryKey: productKeys.detail(42) })

// Window focus refetching: quando o usuário volta à aba, dados stale são revalidados// Ativo por default — desative globalmente só se tiver motivo realconst queryClient = new QueryClient({  defaultOptions: {    queries: {      staleTime: 1000 * 60 * 2,       // dados frescos por 2 minutos      refetchOnWindowFocus: true,      // padrão — deixe ativo      refetchOnReconnect: true,        // revalida ao reconectar à internet    },  },})// Polling: refetch periódico, condicional via funçãouseQuery({  queryKey: productKeys.detail(jobId),  queryFn: () => fetchJobStatus(jobId),  refetchInterval: (query) => {    // Para o polling quando o job termina    if (query.state.data?.status === 'complete') return false    return 2_000 // a cada 2s enquanto pendente  },})

const { isPending, isFetching, isError, data, error } = useQuery({  queryKey: productKeys.list(filters),  queryFn: () => fetchProducts(filters),})// isPending: query ainda não tem dados em cache (primeiro load)// isFetching: queryFn está executando — inclui background refetches// isLoading: atalho para isPending && isFetching (primeiro load ativo)// Padrão correto em v5:if (isPending) return <Spinner />         // sem dados aindaif (isError) return <ErrorAlert>{error.message}</ErrorAlert>// A partir daqui TypeScript sabe que data está definidoreturn (  <>    {isFetching && <SubtleRefetchIndicator />}  // feedback sutil em background    <ProductGrid products={data} />  </>)

function useUpdateProduct() {  const queryClient = useQueryClient()  return useMutation({    mutationFn: (product: Partial<Product> & { id: number }) =>      api.products.update(product),    onMutate: async (updatedProduct) => {      // 1) Cancelar refetches em voo para evitar race condition      await queryClient.cancelQueries({ queryKey: productKeys.lists() })      // 2) Snapshot do estado anterior (para rollback)      const previousProducts = queryClient.getQueryData(productKeys.list(filters))      // 3) Atualização otimista no 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) Rollback em caso de erro      queryClient.setQueryData(productKeys.list(filters), context?.previousProducts)    },    onSettled: () => {      // 4b) Sempre revalidar com o servidor — sucesso OU erro      // Use onSettled, não onSuccess, para garantir resync mesmo após rollback      queryClient.invalidateQueries({ queryKey: productKeys.lists() })    },  })}

// 1) store/useFilterStore.ts — Zustand guarda as preferências do usuárioexport const useFilterStore = create<FilterState>()(  persist(    (set) => ({      selectedCategory: '',      sortOrder: '' as SortOrder,      setSelectedCategory: (selectedCategory) => set({ selectedCategory }),      setSortOrder: (sortOrder) => set({ sortOrder }),    }),    { name: 'product-filters' } // preferências persistem entre sessões  ))// 2) hooks/useProducts.ts — bridge entre Zustand e TanStack Queryexport function useProducts() {  // useShallow evita re-render quando outros campos do store mudam  const { selectedCategory, sortOrder } = useFilterStore(    useShallow((s) => ({      selectedCategory: s.selectedCategory,      sortOrder: s.sortOrder,    }))  )  return useQuery({    // Os filtros fazem parte da key — cache por combinação de filtros    queryKey: productKeys.list({ category: selectedCategory, sort: sortOrder }),    queryFn: () => fetchProducts({ category: selectedCategory, sort: sortOrder }),    staleTime: 1000 * 60 * 2,    // Mantém dados anteriores visíveis enquanto os novos carregam    placeholderData: (prev) => prev,  })}// 3) ProductList.tsx — componente que consome ambas as 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 com todos os slices    slices/      filterSlice.ts        # filtros de UI      uiSlice.ts            # tema, modais, sidebar  queries/    productKeys.ts          # query key factory    useProducts.ts          # useQuery + filtros do Zustand    useProductMutations.ts  # useMutation com optimistic update  components/    ProductList.tsx         # consome useProducts()    FilterPanel.tsx         # consome useFilterStore()  lib/    queryClient.ts          # QueryClient com defaultOptions