Conceitos fundamentais
@bentoo/state-man
foi criado com o objetivo de simplificar o gerenciamento de estado sem sacrificar performance, legibilidade ou reatividade. Abaixo você encontra os pilares principais da lib.
Store
A store é o núcleo de tudo. Ela representa um estado encapsulado que pode ser lido e alterado por qualquer parte da aplicação.
Você cria uma store usando create
. O valor inicial pode ser qualquer tipo: number
, string
, object
, array
, etc.
import { create } from "@bentoo/state-man";
// Store com estado numérico
export const useCounter = create(0);
// Store com objeto
export const useUser = create({ name: 'Ada', age: 30 });
Por que isso é útil?
- Você pode reutilizar a mesma store em múltiplos componentes.
- Não precisa de
Provider
,Context
ou configuração global. - Funciona para qualquer tipo de dado — de forma síncrona e previsível.
Hook personalizado
Cada store criada retorna um hook React, como se fosse um useState()
encapsulado.
const { state, setState } = useCounter();
Você pode usar isso diretamente dentro de qualquer componente:
function Counter() {
const { state, setState } = useCounter();
return <button onClick={() => setState(state + 1)}>Contador: {state}</button>;
}
Vantagens:
- Leitura clara e intuitiva.
- Desestruturação prática (não precisa lembrar de nomes complexos).
- Familiar para quem já usa React.
Imutabilidade inteligente
Você pode alterar o estado de duas formas:
1. Passando um novo valor
setState(42);
2. Usando uma função atualizadora (imutabilidade funcional):
setState(prev => prev + 1);
Isso garante que o valor será baseado no último estado real, evitando problemas de concorrência típicos em ambientes com múltiplas atualizações rápidas.
Reatividade fina (Fine-grained reactivity)
A store é reativa: quando seu valor muda, somente os componentes que usam aquele valor são atualizados.
Sem re-renderizações globais, como acontece com Context API.
Resumo
Conceito | Descrição |
---|---|
create() | Cria uma store reativa |
Hook personalizado | Retorna { state, setState } |
Atualização direta | setState(novoValor) |
Atualização funcional | setState(prev => ...) |
Sem Provider | Não exige contexto nem hierarquia de React |
Reatividade | Somente o necessário é atualizado |
@bentoo/state-man
é comouseState
, só que compartilhável, persistente e reativo por padrão.