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
Concept | Description |
---|---|
create() | Creates a reactive store |
Custom hook | Returns { state, setState } |
Direct update | setState(newValue) |
Functional update | setState(prev => ...) |
No Provider | Doesn’t require context or React hierarchy |
Reactivity | Only what’s necessary gets updated |
@bentoo/state-man
is likeuseState
, but shareable, persistent, and reactive by default.