Pode ser que você encontrou o que procurava
Se você procura uma alternativa simples, leve e eficaz ao Redux, vale a pena conhecer o Zustand.

O Zustand é uma biblioteca de gerenciamento de estado para React com foco em simplicidade, baixa dependência e performance.

Por que usar Zustand?

  • Zero boilerplate
  • Totalmente baseado em hooks
  • Rápido e fácil de aprender
  • Ideal para projetos pequenos, médios e até grandes

Instalação

npm install zustand

Vamos criar um contador simples

Dentro de um diretório chamado store, crie o arquivo useCounterStore.ts com o seguinte conteúdo:

import { create } from 'zustand'

interface CounterState {
  count: number
  increase: () => void
  decrease: () => void
  reset: () => void
}

export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}))

Agora, no arquivo App.tsx, vamos consumir a store criada:

import React from 'react'
import { useCounterStore } from './store/useCounterStore'

export default function App() {
  const { count, increase, decrease, reset } = useCounterStore()

  return (
    <div>
      <h1>Contador: {count}</h1>
      <button onClick={increase}>+1</button>
      <button onClick={decrease}>-1</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

Vantagens

  • A API é direta e intuitiva
  • Você pode usar slices e middlewares (como persistência e devtools)
  • Integração fácil com TypeScript

Se você ainda não testou o Zustand, recomendo fortemente experimentar em seu próximo projeto com React.

É direto, intuitivo e reduz muito o código necessário para gerenciar estados.

Obrigado por acompanhar até aqui!
Se curtiu o conteúdo, me siga para mais dicas de React, TypeScript e desenvolvimento web.

Vamos evoluir juntos!