Important!: starting from version
0.0.8
@odemian/react-store
has dropped proxy based reactivity. For the sake of simplicity it will only rely on actions to update store (instead of having a mix of actions and proxy mutations)
React has no shortage of state management libraries. From the heavyweight champion Redux to modern solutions like Zustand and Valtio, youโve got options โ sometimes too many. But what if you want something super tiny, fully type-safe, and feels like magic to use?
Meet @odemian/react-store
: a global state manager that weighs less than 1KB (v0.0.5 is 400b gziped), has zero dependencies, and gives you reactive state via JavaScript proxies โจ.
โ๏ธ How It Works
Under the hood, it uses:
-
useSyncExternalStore
for React 18+ compatibility - JavaScript Proxies for mutation tracking
- A minimal internal pub/sub system
This gives you the mutability of Valtio, but with a more focused, compact footprint.
๐ Getting Started
1. Install it
npm install @odemian/react-store
2. Create a Store
// stores/userStore.ts
import { createStore } from "@odemian/react-store";
export const useUser = createStore<{
name: string;
surname: string;
}>({
name: "",
surname: "",
});
3. Use It in Components
import { useUser } from "./stores/userStore";
export const UserSettings = () => {
const user = useUser();
return (
<input
value={user.name}
onChange={(e) => (user.name = e.target.value)} // ๐ฎ feels like magic
/>
);
};
Yes, you can mutate directly โ and itโs reactive. No setState
, no actions, no reducers.
4. Use Outside React
Need to update state outside components? Use the static .store
API:
useUser.store.update({ name: "Jane" });
useUser.store.subscribe((state) => console.log("Changed", state));
๐ฌ Comparison with Other Tools
Feature | @odemian/react-store |
Redux | Zustand | Valtio |
---|---|---|---|---|
Size | ~1KB | ~18KB | ~1.2KB | ~2KB |
Mutation Style | Proxy (mutable) | Immutable | Functional | Proxy |
Boilerplate | None | High | Low | Low |
React Compatibility | โ
useSyncExternalStore
|
โ | โ | โ |
Middleware Support | โ | โ | โ | โ ๏ธ Limited |
TypeScript Support | โ | โ | โ | โ |
Use it when:
- You want global state, but Redux is overkill
- You love Valtioโs proxies but want fewer features
- You value simplicity and type-safety
โ ๏ธ Caveats
- Not designed for advanced middleware or devtools
- Not suitable for deeply nested logic-heavy state flows
โจ Final Thoughts
If you're building a dashboard, internal tool, or UI widget and just need a few global states, @odemian/react-store
might be the most effortless way to do it.
๐ฌ Give it a try, star the repo, and let me know what you build with it!
Top comments (0)