kosha v1.0.0

Kosha

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:

     const count = useKosha(state => state.count);

3. Partial State Updates

   • Update specific parts of the state easily without spreading:

     set({ count });
     set(state => ({ count: state.count + 1 }));

4. Flexible Consumption

   • Use the entire store or specific selectors as needed:

     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:

pnpm add kosha

or

npm install kosha

or

yarn add kosha

📖 Usage

Define a Store

import { create } from "kosha";

const useKosha = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
}));

Consume Without a Selector

const Counter = () => {
  const { count, increment } = useKosha();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

Consume With a Selector

const Counter = () => {
  const count = useKosha(state => state.count);
  const increment = useKosha(state => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

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:

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:

     const count = useKosha(state => state.count);

     or

     const fullName = useKosha(state => state.firstName + state.lastName);

   • Zustand requires explicit optimizations and may still trigger redundant re-renders. See the Zustand docs.

3. Built-in Partial Updates

   • Kosha simplifies state updates with clean syntax, no need to spread the previous state manually:

     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:

     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.

📜 License

Kosha is licensed under the MPL-2.0 open-source license.

Check out our courses or sponsor our work.