Skip to main content

Core concepts

@bentoo/state-man was built to simplify state management without sacrificing performance, readability, or reactivity. Below are the main pillars of the library.

Store

The store is the core of everything. It represents an encapsulated state that can be read and modified by any part of the application.

You create a store using create. The initial value can be any type: number, string, object, array, etc.

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

// Store with a numeric state
export const useCounter = create(0);

// Store with an object
export const useUser = create({ name: 'Ada', age: 30 });

Why is this useful?

  • You can reuse the same store across multiple components.
  • No need for Provider, Context, or global setup.
  • Works with any kind of data — synchronously and predictably.

Custom hook

Each created store returns a React hook, like a wrapped useState().

const { state, setState } = useCounter();

You can use it directly inside any component:

function Counter() {
const { state, setState } = useCounter();
return <button onClick={() => setState(state + 1)}>Counter: {state}</button>;
}

Advantages:

  • Clear and intuitive syntax.
  • Convenient destructuring (no need to memorize complex names).
  • Familiar for React users.

Smart immutability

You can update the state in two ways:

1. Passing a new value

setState(42);

2. Using an updater function (functional immutability):

setState(prev => prev + 1);

This ensures the update is based on the latest actual state, avoiding race conditions in fast-changing environments.

Fine-grained reactivity

The store is reactive: when its value changes, only components that use that value are updated.

No global re-renders like with the Context API.

Summary

ConceptDescription
create()Creates a reactive store
Custom hookReturns { state, setState }
Direct updatesetState(newValue)
Functional updatesetState(prev => ...)
No ProviderDoesn’t require context or React hierarchy
ReactivityOnly what’s necessary gets updated

@bentoo/state-man is like useState, but shareable, persistent, and reactive by default.