11# Kosha <img src =" https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png " style =" height : 40px " />
22
3- [ ![ Test Status] ( https://github.com/react18-tools/kosha/actions/workflows/test.yml/badge.svg )] ( https://github.com/react18-tools/kosha/actions/workflows/test.yml ) [ ![ Maintainability] ( https://api.codeclimate.com/v1/badges/55202c8c7bee2d7a95bd/maintainability )] ( https://codeclimate.com/github/react18-tools/kosha/maintainability ) [ ![ Code Coverage] ( https://codecov.io/gh/react18-tools/kosha/graph/badge.svg )] ( https://codecov.io/gh/react18-tools/kosha ) [ ![ Version] ( https://img.shields.io/npm/v/kosha.svg?colorB=green )] ( https://www.npmjs.com/package/kosha ) [ ![ Downloads] ( https://img.jsdelivr.com/img.shields.io/npm/d18m/kosha.svg )] ( https://www.npmjs.com/package/kosha ) ![ Bundle Size] ( https://img.shields.io/bundlephobia/minzip/kosha ) [ ![ Gitpod Ready] ( https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod )] ( https://gitpod.io/from-referrer/ )
3+ [ ![ Test Status] ( https://github.com/react18-tools/kosha/actions/workflows/test.yml/badge.svg )] ( https://github.com/react18-tools/kosha/actions/workflows/test.yml )
4+ [ ![ Maintainability] ( https://api.codeclimate.com/v1/badges/55202c8c7bee2d7a95bd/maintainability )] ( https://codeclimate.com/github/react18-tools/kosha/maintainability )
5+ [ ![ Code Coverage] ( https://codecov.io/gh/react18-tools/kosha/graph/badge.svg )] ( https://codecov.io/gh/react18-tools/kosha )
6+ [ ![ Version] ( https://img.shields.io/npm/v/kosha.svg?colorB=green )] ( https://www.npmjs.com/package/kosha )
7+ [ ![ Downloads] ( https://img.jsdelivr.com/img.shields.io/npm/d18m/kosha.svg )] ( https://www.npmjs.com/package/kosha )
8+ ![ Bundle Size] ( https://img.shields.io/bundlephobia/minzip/kosha )
9+ [ ![ Gitpod Ready] ( https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod )] ( https://gitpod.io/from-referrer/ )
410
5- ### ** A Modern, Lightweight, and Powerful State Management Library for React**
11+ ### ** A Modern, Lightweight, and High-Performance State Management Library for React**
612
7- Kosha is a minimal global state management solution tailored for modern React applications. At only ** 420 bytes** ( minzipped) , it provides exceptional performance and simplicity for developers focused on clean and efficient code .
13+ ** Kosha** is a production-ready, minimalistic global state management solution for modern React applications. Weighing in at just ** ~ 450 bytes minzipped** , it’s built for developers who care about performance, clean APIs, and full React 18+ compatibility .
814
915---
1016
11- ## 🚀 Key Features
17+ ## 📚 Table of Contents
1218
13- 1 . ** Ultra-Lightweight**
19+ - [ 🚀 Features] ( #-features )
20+ - [ 📦 Installation] ( #-installation )
21+ - [ 🧑💻 Usage] ( #-usage )
22+ - [ ⚖️ Zustand Comparison] ( #️-why-choose-kosha-over-zustand )
23+ - [ 📁 Examples] ( #-examples )
24+ - [ ❓ FAQ] ( #-faq )
25+ - [ 🤝 Contributing] ( #-contributing )
26+ - [ 📜 License] ( #-license )
27+
28+ ---
1429
15- - Minzipped size: ** 571 bytes ** , ideal for performance-critical projects.
30+ ## 🚀 Features
1631
17- 2 . ** Optimized Re-renders**
32+ 1 . ** Ultra-Lightweight**
33+ - Minzipped size: ~ ** 420–571 bytes** , making it ideal for performance-critical applications.
1834
19- - Components only re-render when the selector output changes.
35+ 2 . ** Zero Unnecessary Re-renders**
36+ - Based on React’s ` useSyncExternalStore ` , Kosha ensures components only re-render when selected state changes.
2037 - Example:
2138 ``` tsx
2239 const count = useKosha (state => state .count );
2340 ```
2441
25423. ** Partial State Updates **
26-
27- - Update specific parts of the state easily without spreading :
43+ - Update only what you need —no need to manually spread previous state :
2844 ` ` ` tsx
2945 set({ count });
3046 set(state => ({ count: state.count + 1 }));
3147 ` ` `
3248
33- 4. ** Flexible Consumption **
34-
35- - Use the entire store or specific selectors as needed :
49+ 4. ** Flexible Consumption API **
50+ - Select specific fields or use the entire store :
3651 ` ` ` tsx
3752 const { count, setCount } = useKosha();
3853 ` ` `
3954
40555. ** Concurrent Rendering Ready **
41- - Built on React ’ s ` useSyncExternalStore ` , ensuring compatibility with React 18 + features .
56+ - Fully compatible with React 18 + and the concurrent features thanks to ` useSyncExternalStore ` .
4257
4358-- -
4459
45- ## ⭐ Installation
60+ ## 📦 Installation
4661
47- Install Kosha using your preferred package manager :
62+ Install using your preferred package manager :
4863
4964` ` ` bash
5065pnpm add kosha
@@ -64,9 +79,9 @@ yarn add kosha
6479
6580-- -
6681
67- ## 📖 Usage
82+ ## 🧑💻 Usage
6883
69- ### Define a Store
84+ ### 1. Create a Store
7085
7186` ` ` tsx
7287import { create } from "kosha";
@@ -77,7 +92,7 @@ const useKosha = create(set => ({
7792}));
7893` ` `
7994
80- ### Consume Without a Selector
95+ ### 2. Consume the Store ( No Selector )
8196
8297` ` ` tsx
8398const Counter = () => {
@@ -92,7 +107,7 @@ const Counter = () => {
92107};
93108` ` `
94109
95- ### Consume With a Selector
110+ ### 3. Use Selectors
96111
97112` ` ` tsx
98113const Counter = () => {
@@ -108,105 +123,95 @@ const Counter = () => {
108123};
109124` ` `
110125
111- ### Direct Store Updates
126+ ### 4. Enable Direct Updates via ` set `
112127
113- In the latest version , the ` .set ` method has been removed from the hook . This means ` useKosha. set` is no longer available by default .
128+ Kosha no longer exposes ` .set ` by default . To update the state externally , expose ` set ` explicitly :
114129
115- To use the ` set ` method , you must explicitly expose it within your store :
116-
117- ` ` ` typescript
130+ ` ` ` ts
118131import { create } from "kosha";
119132
120133const useKosha = create(set => ({
121134 count: 0,
122135 increment: () => set(state => ({ count: state.count + 1 })),
123- set, // <- Expose the set method to use it as a standard setter with full functionality
136+ set, // Exposed manually
124137}));
125138` ` `
126139
127- -- -
128-
129- This post provides a clear comparison between ** Kosha ** and ** Zustand ** , emphasizing Kosha ' s advantages in terms of size, performance, and flexibility. Here’s a brief recap and refinement:
130-
131- -- -
132-
133- ### ** Why Choose Kosha Over Zustand ? **
140+ ### 5. Update Outside React
134141
135- 1. ** Lighter & Faster **
142+ Update the store from anywhere ( outside React ) using ` getState() ` :
136143
137- - Kosha ’s ** minzipped size ** is only ** 420 bytes ** , making it ideal for performance - critical projects .
138- - Zustand is heavier , which could impact apps where every kilobyte counts .
139-
140- 2. ** Optimized Selectors **
141-
142- - Kosha ensures ** zero unnecessary re - renders ** out of the box —components only re - render when the selector output changes .
143- Example :
144+ ` ` ` ts
145+ useKosha.getState().increment();
146+ ` ` `
144147
145- ` ` ` tsx
146- const count = useKosha(state => state.count);
147- ` ` `
148+ -- -
148149
149- or
150+ ## ⚖️ Why Choose Kosha Over Zustand ?
150151
151- ` ` ` tsx
152- const fullName = useKosha(state => state.firstName + state.lastName);
153- ` ` `
152+ Kosha offers a streamlined alternative for projects where ** performance , simplicity ** , and ** minimal bundle size ** matter most .
154153
155- - Zustand requires explicit optimizations and may still trigger redundant re - renders . See the [Zustand docs ](https :// github.com/pmndrs/zustand/blob/37e1e3f193a5e5dec6fbd0f07514aec59a187e01/docs/guides/prevent-rerenders-with-use-shallow.md).
154+ | Feature | Kosha | Zustand |
155+ | -------------------------------- | ------------ | ------------------------------------------------ |
156+ | Size (minzipped ) | \~ 420 bytes | \~ 1.1 –1.5 kB |
157+ | Built - in Optimized Selectors | ✅ | ⚠️ Needs shallow equality or manual optimization |
158+ | Partial Updates | ✅ (native ) | ✅ |
159+ | React 18 + ` useSyncExternalStore ` | ✅ | ✅ |
160+ | Learning Curve | Super simple | Simple |
156161
157- 3. ** Built - in Partial Updates **
162+ ** Example ( Selector - Based Optimization in Kosha ) : **
158163
159- - Kosha simplifies ** state updates ** with clean syntax , no need to spread the previous state manually :
164+ ` ` ` tsx
165+ const fullName = useKosha(state => state.firstName + state.lastName);
166+ ` ` `
160167
161- ` ` ` tsx
162- set({ count }); // Update 'count' only
168+ Zustand may still trigger re - renders here unless carefully optimized . See [Zustand ’s official docs ](https :// github.com/pmndrs/zustand/blob/main/docs/guides/prevent-rerenders-with-use-shallow.md) for details.
163169
164- set(state => ({ count: state.count + 1 })); // Increment 'count'
165- ` ` `
170+ -- -
166171
167- - Zustand also supports partial updates in newer versions , but Kosha delivers this efficiency in a smaller footprint .
172+ ## 📁 Examples
168173
169- 4. ** Flexible API **
170- - Kosha allows consuming the entire store when needed :
171- ` ` ` tsx
172- const { count, setCount } = useKosha();
173- ` ` `
174+ You can find real - world usage examples inside the [` examples/ ` ](https :// github.com/react18-tools/kosha/tree/main/examples) directory of this repository.
174175
175176-- -
176177
177- ### When to Use Kosha ?
178+ ## ❓ FAQ
178179
179- Choose ** Kosha ** if your project prioritizes :
180+ ### 1. Is Kosha production - ready ?
180181
181- - Minimal bundle size .
182- - Performance and selector efficiency .
183- - Modern state management with a lean API .
182+ Yes ! Kosha is stable , lightweight , and tested —suitable for production environments .
184183
185- For larger projects or those already using Zustand ’ s ecosystem , Kosha offers a streamlined alternative .
184+ ### 2. Does Kosha support async actions ?
186185
187- ## 📌 FAQ
186+ Yes . Define asynchronous logic inside your store methods using ` async/await ` or promise chains .
188187
189- ### 1. Does Kosha support async actions ?
188+ ### 3. What happens if I don ' t expose `set` ?
190189
191- Yes ! You can handle async actions with callbacks or promises directly within your store functions .
190+ You won ’ t be able to update the store from outside React context . Expose ` set ` explicitly if needed .
192191
193- ### 2. How does Kosha ensure reactivity ?
192+ ### 4. Does Kosha support React Server Components ?
194193
195- Kosha relies on React ’ s ` useSyncExternalStore ` for smooth integration with React ’ s latest features , including concurrent rendering .
194+ Kosha is designed for client - side state management . Server Component integration isn ’ t a current goal , but discussions are welcome .
196195
197196-- -
198197
199198## 🤝 Contributing
200199
201- We welcome your contributions ! If you encounter issues or have suggestions , please submit them on the [Kosha GitHub Repository ](https :// github.com/react18-tools/kosha).
200+ We welcome contributions from the community !
201+
202+ * 💬 Start a [discussion ](https :// github.com/react18-tools/kosha/discussions)
203+ * 🐛 Report issues on the [Issue Tracker ](https :// github.com/react18-tools/kosha/issues)
204+ * 🧪 Submit PRs to improve or extend Kosha
205+
206+ > Have an idea for a feature or roadmap suggestion ? Open a discussion and help shape Kosha ’s future .
202207
203208-- -
204209
205210## 📜 License
206211
207- Kosha is licensed under the ** MPL - 2.0 ** open - source license .
212+ Kosha is licensed under the ** MPL - 2.0 ** license .
208213
209- <img src = " https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style = " height: 20px" /> Check out [our courses ](https :// mayank-chaudhari.vercel.app/courses) or [sponsor our work ](https://github.com/sponsors/mayank1513).
214+ <img src = " https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style = " height: 20px" /> Explore [our courses ](https :// mayank-chaudhari.vercel.app/courses) or [support development ](https://github.com/sponsors/mayank1513).
210215
211216-- -
212217
0 commit comments