https://github.com/react18-tools/kosha
A modern, lightweight, fast, and powerful global state management library for modern React.js projects.
https://github.com/react18-tools/kosha
mayank1513 nextjs15 react18 react18-global-store react19 turborepo-template zustand
Last synced: 3 months ago
JSON representation
A modern, lightweight, fast, and powerful global state management library for modern React.js projects.
- Host: GitHub
- URL: https://github.com/react18-tools/kosha
- Owner: react18-tools
- License: mpl-2.0
- Created: 2025-01-07T04:19:59.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-03-11T00:43:43.000Z (3 months ago)
- Last Synced: 2025-03-11T01:29:46.089Z (3 months ago)
- Topics: mayank1513, nextjs15, react18, react18-global-store, react19, turborepo-template, zustand
- Language: TypeScript
- Homepage: https://kosha-six.vercel.app/
- Size: 1.14 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Kosha 
[](https://github.com/react18-tools/kosha/actions/workflows/test.yml) [](https://codeclimate.com/github/react18-tools/kosha/maintainability) [](https://codecov.io/gh/react18-tools/kosha) [](https://www.npmjs.com/package/kosha) [](https://www.npmjs.com/package/kosha)  [](https://gitpod.io/from-referrer/)
### **A Modern, Lightweight, and Powerful State Management Library for React**
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.
---
## 🚀 Key Features
1. **Ultra-Lightweight**
- Minzipped size: **571 bytes**, ideal for performance-critical projects.
2. **Optimized Re-renders**
- Components only re-render when the selector output changes.
- Example:
```tsx
const count = useKosha(state => state.count);
```
3. **Partial State Updates**
- Update specific parts of the state easily without spreading:
```tsx
set({ count });
set(state => ({ count: state.count + 1 }));
```
4. **Flexible Consumption**
- Use the entire store or specific selectors as needed:
```tsx
const { count, setCount } = useKosha();
```
5. **Concurrent Rendering Ready**
- Built on React’s `useSyncExternalStore`, ensuring compatibility with React 18+ features.
---
## ⭐ Installation
Install Kosha using your preferred package manager:
```bash
pnpm add kosha
```
or
```bash
npm install kosha
```
or
```bash
yarn add kosha
```
---
## 📖 Usage
### Define a Store
```tsx
import { create } from "kosha";
const useKosha = create(set => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
}));
```
### Consume Without a Selector
```tsx
const Counter = () => {
const { count, increment } = useKosha();
return (
Count: {count}
Increment
);
};
```
### Consume With a Selector
```tsx
const Counter = () => {
const count = useKosha(state => state.count);
const increment = useKosha(state => state.increment);
return (
Count: {count}
Increment
);
};
```
### Direct Store Updates
In the latest version, the `.set` method has been removed from the hook. This means `useKosha.set` is no longer available by default.
To use the `set` method, you must explicitly expose it within your store:
```typescript
import { create } from "kosha";
const useKosha = create(set => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
set, // <- Expose the set method to use it as a standard setter with full functionality
}));
```
---
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:
---
### **Why Choose Kosha Over Zustand?**
1. **Lighter & Faster**
- Kosha’s **minzipped size** is only **420 bytes**, making it ideal for performance-critical projects.
- Zustand is heavier, which could impact apps where every kilobyte counts.
2. **Optimized Selectors**
- Kosha ensures **zero unnecessary re-renders** out of the box—components only re-render when the selector output changes.
Example:
```tsx
const count = useKosha(state => state.count);
```
or
```tsx
const fullName = useKosha(state => state.firstName + state.lastName);
```
- 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).
3. **Built-in Partial Updates**
- Kosha simplifies **state updates** with clean syntax, no need to spread the previous state manually:
```tsx
set({ count }); // Update 'count' only
set(state => ({ count: state.count + 1 })); // Increment 'count'
```
- Zustand also supports partial updates in newer versions, but Kosha delivers this efficiency in a smaller footprint.
4. **Flexible API**
- Kosha allows consuming the entire store when needed:
```tsx
const { count, setCount } = useKosha();
```
---
### When to Use Kosha?
Choose **Kosha** if your project prioritizes:
- Minimal bundle size.
- Performance and selector efficiency.
- Modern state management with a lean API.
For larger projects or those already using Zustand’s ecosystem, Kosha offers a streamlined alternative.
## 📌 FAQ
### 1. Does Kosha support async actions?
Yes! You can handle async actions with callbacks or promises directly within your store functions.
### 2. How does Kosha ensure reactivity?
Kosha relies on React’s `useSyncExternalStore` for smooth integration with React’s latest features, including concurrent rendering.
---
## 🤝 Contributing
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).
---
## 📜 License
Kosha is licensed under the **MPL-2.0** open-source license.
Check out [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsor our work](https://github.com/sponsors/mayank1513).
---
Built with 💖 by Mayank Kumar Chaudhari