@bentoo/state-man: A Revolução Leve e Simples na Gestão de Estado em React

@bentoo/state-man: A Revolução Leve e Simples na Gestão de Estado em React

Se trabalha com React, sabe que gerir o estado da aplicação pode rapidamente transformar-se num labirinto de boilerplate, Context Providers aninhados e re-renders globais desnecessários que afetam a performance.

O mercado está repleto de soluções robustas (como Redux e, mais recentemente, Zustand), mas o que acontece se precisar de algo mais leve, mais rápido e com zero configuração complexa?

É aqui que entra o @bentoo/state-man. Esta biblioteca emergente está a ser aclamada como a forma mais simples, direta e eficiente de lidar com o estado em aplicações React, eliminando a complexidade sem sacrificar a performance.

O que é o @bentoo/state-man?

O @bentoo/state-man é um pacote leve de gestão de estado (com cerca de 1.3KB comprimido) construído especificamente para React. A sua filosofia central é fornecer uma API minimalista e intuitiva, permitindo que os desenvolvedores criem stores de estado global e local sem a necessidade de Contextos ou providers.

É uma solução Zero Dependencies (zero dependências) que se integra perfeitamente em qualquer aplicação, desde SPAs (Single Page Applications) a micro-frontends.

Recursos Chave que o Fazem Distinguir-se

A força do @bentoo/state-man reside na sua simplicidade e inteligência integrada:

1. Subscrições Seletivas (Selective Subscriptions):
   Esta é a sua maior vantagem de performance. Ao contrário de outras soluções que podem desencadear re-renders em muitos componentes quando uma pequena parte do estado muda, o @bentoo/state-man garante que apenas os componentes que estão a utilizar os dados alterados serão atualizados. Isto previne re-renders globais desnecessários.

2. Adeus, Context Providers!
   A API é baseada em hooks (useStore) e dispensa totalmente o uso de providers ou a API de Contexto. Pode criar a sua store e usá-la em qualquer lugar da sua aplicação, sem precisar de envolver o seu componente principal (como App.tsx) num Provider.

3. Auto-Memoization Inteligente:
   A biblioteca incorpora um mecanismo de caching inteligente (auto-memoization), o que contribui para o seu desempenho superior. Otimizações que, em outras bibliotecas, teria que implementar manualmente, são tratadas automaticamente pelo @bentoo/state-man.

4. Bundle Size Ultraleve:
   Com apenas ~1.3KB, é uma das soluções de estado mais compactas do mercado, garantindo um impacto mínimo nos tempos de carregamento da sua aplicação.

@bentoo/state-man vs. As Alternativas

Característica	Context API (React Padrão)	Zustand	@bentoo/state-man
Requer Providers?	✅ Sim	❌ Não	❌ Não
Subscrições Seletivas?	❌ Não (Geralmente re-renderiza demais)	✅ Sim	✅ Sim (Foco Principal)
Bundle Size	N/A (Embutido no React)	~2.7KB	~1.3KB (Mais Pequeno)
Memoization	Manual (via useMemo, useCallback)	Manual/Opcional	Automática (Auto-Memoization)

Em suma, ele oferece a facilidade de uso do Zustand, mas com um bundle mais pequeno e otimizações automáticas, superando o Context API em termos de performance e facilidade de configuração.

Como Começar em 2 Passos

A instalação e o uso são extremamente simples.

1. Instalação

npm install @bentoo/state-man
# ou
yarn add @bentoo/state-man

2. Criação e Uso da Store (O Exemplo do Contador)

1. Crie a Store (./stores/counter.ts):

import { create } from "@bentoo/state-man";

// O estado inicial é o número 0
export const useStore = create(0);

2. Use a Store em Componentes (./Counter.tsx):

import { useStore } from "./stores/counter";

export const Counter = () => {
  // Apenas este componente re-renderizará quando o estado mudar
  const { state, setState } = useStore();

  const increment = () => setState(state + 1);

  return (
    <button onClick={increment}>
      A contagem é: {state}
    </button>
  );
};

3. Use a Store em Componentes diferentes (./App.tsx):

import { useStore } from "./stores/counter";
import { Counter } from "./Counter";

function App() {
  const { state } = useStore(); // Aceder ao valor atual

  return (
    <div>
      <h1>Valor Global: {state}</h1>
      <Counter />
    </div>
  );
}

Se procura uma solução de gestão de estado que valorize a performance (subscrições seletivas, auto-memoization) e a experiência do desenvolvedor (API simples, sem providers), o @bentoo/state-man é uma excelente escolha.

Diga adeus ao boilerplate desnecessário e olá a uma gestão de estado eficiente e elegante. Explore a documentação oficial para mergulhar mais fundo nas funcionalidades avançadas!