Pular para o conteúdo principal

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

ConceitoDescrição
create()Cria uma store reativa
Hook personalizadoRetorna { state, setState }
Atualização diretasetState(novoValor)
Atualização funcionalsetState(prev => ...)
Sem ProviderNão exige contexto nem hierarquia de React
ReatividadeSomente o necessário é atualizado

@bentoo/state-man é como useState, só que compartilhável, persistente e reativo por padrão.