DEV Community

Oleksandr Demian
Oleksandr Demian

Posted on • Edited on

๐ŸŒ The smallest and simplest global state manager for React

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 โœจ.

Image description

โš™๏ธ 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
Enter fullscreen mode Exit fullscreen mode

2. Create a Store

// stores/userStore.ts
import { createStore } from "@odemian/react-store";

export const useUser = createStore<{
  name: string;
  surname: string;
}>({
  name: "",
  surname: "",
});
Enter fullscreen mode Exit fullscreen mode

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
    />
  );
};
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

๐Ÿ”ฌ 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)