DEV Community

Mayank Kumar Chaudhari
Mayank Kumar Chaudhari

Posted on

🧠 Kosha – A 450-byte Global State Manager for React (Highly Optimized and with Middleware Support)

Kosha

React developers often juggle between performance, bundle size, and developer ergonomics when choosing a state management library.

Introducing Kosha – a production-ready, ~450 byte global state manager with:

βœ… Full React 18+ and concurrent rendering support

βœ… Optimized selectors using useSyncExternalStore

βœ… Partial updates out-of-the-box

βœ… Built-in middleware architecture

βœ… Working persist middleware

βœ… No unnecessary re-renders


πŸ§ͺ How it Works

Create a store with a minimal API:

import { create } from "kosha";

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
}));
Enter fullscreen mode Exit fullscreen mode


`

Use selector-based consumption for optimization:

ts
const count = useStore(state => state.count);

Update state from anywhere, even outside React:

ts
useStore.getState().increment();


βš–οΈ Kosha vs Zustand

Feature Kosha Zustand
Size (minzipped) ~450 bytes ~0.6–2.5kB
Optimized Selectors βœ… Built-in ⚠️ Manual
Middleware βœ… (custom) βœ… Rich plugins
Devtools ❌ βœ…

πŸ”§ Middleware Support Example

Check out the working persist middleware.


πŸ“¦ Try It Now

Live demo: kosha-six.vercel.app
Source: github.com/react18-tools/kosha

Let me know what middleware you'd love to see added next!

  • Post the long-form blog above with tags: react, javascript, webdev, opensource, state-management
  • Publish during weekday morning IST/EST (e.g., Tue/Wed ~9–10am IST or EST)

Top comments (0)