venkateshsundaram
A zero-boilerplate, ultra-fast global state management library for React.
For more details, see here.
Table of Contents
- Why state-jet
- Documentation
- Installation
- Wiki
- GlobalState
- Slices
- Store
- Middlewares
- Typescript Usage
- Why state-jet Is More Advanced Than Zustand
- FAQ
- Conclusion
- Comparison Table
- Comparison with other libraries
- Contributing
- Publishing
- Feedbacks and Issues
- License
Why state-jet
- No Context, No Providers – Works outside React, reducing unnecessary re-renders.
- Automatic Re-Renders – Only components using specific state values update.
- Super Lightweight – Ultra small!
- SSR & Next.js Support – Works on both client and server.
Documentation
Documentation: https://statejet.org/docs
Tutorials: https://statejet.org/docs/tutorial/intro/
API Reference: https://statejet.org/docs/api-reference/global-state/
Installation
The Statejet package lives in npm. Please see the installation guide.
To install the latest stable version, run the following command:
npm install state-jetOr if you're using yarn:
yarn add state-jetOr if you're using cdn:
<script src="https://cdn.jsdelivr.net/npm/state-jet@latest/dist/index.cjs"></script>Wiki
GlobalState
The useStateGlobal hook is the simplest entry point to State-Jet—-ideal for simple applications with minimal state management needs. It allows you to create stateful values that can be accessed and updated from any component in your application, regardless of their location in the component tree.
Create GlobalState
// file: src/store/index.ts
import { useStateGlobal } from "state-jet";
export const counterState = useStateGlobal("counter", 0);Binding Global State to a Component
// file: src/components/Counter.tsx
import { counterState } from "../store";
export default function Counter() {
const count = counterState.useState() as number;
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => counterState.set(count - 1)}>Decrement</button>
<button onClick={() => counterState.set(count + 1)}>Increment</button>
</div>
);
}Slices
Slices in state-jet represent logical groupings of state that help organize application data into manageable pieces.
Create Slice
// file: src/store/slices.ts
import { useSlice } from "state-jet";
const cartSlice = useSlice("cart");
export const useCartSlice = () => cartSlice("cartState", {});Multi States in Single Slice
// file: src/store/slices.ts
import { useSlice } from "state-jet";
const productSlice = useSlice("products");
const cartSlice = useSlice("cart");
// Define multiple state values under a slice
export const useProductSlice = () => ({
productState: productSlice("productState", {}),
productFilter: productSlice("productFilter", { search: "", category: "all" }),
productSort: productSlice("productSort", { order: "asc" }),
});
export const useCartSlice = () => cartSlice("cartState", {});Store
The useStore hook serves as a mechanism to group related slices of state into a cohesive store, enabling modular and organized state management in React applications which are better suited for larger applications with more complex and structured state requirements.
Create Store
// file: src/store/index.ts
import { useStore } from "state-jet";
import { useProductSlice, useCartSlice } from "./slices";
/**
* Ecommerce store with product and cart slices
*/
const initializer: any = () => ({
products: useProductSlice(),
cart: useCartSlice(),
});
export const useEcommerceStore = () => useStore(initializer);Binding Store to a Component
// file: src/components/ProductList.tsx
import { useEcommerceStore } from "../store";
type ProductType = {
name: string,
price: number
}
type CartType = {
name: string,
price: number,
count: number
}
export const ProductList = () => {
const store = useEcommerceStore();
const { productState }: any = store.products;
const cart: any = store.cart;
const productSliceData: any = productState.useState();
const cartSliceData: any = cart.useState();
const productItems: Array<ProductType> = productSliceData?.items || [];
const cartItems: Array<CartType> = cartSliceData?.items || [];
const addToCart = (product: ProductType) => {
if (cartItems.some((cartItem: CartType) => cartItem.name === product.name)) {
cart.set((cartVal: any)=> ({
...cartVal,
items: cartItems.map((cartItem: CartType) => {
if (cartItem.name === product.name) {
return { ...cartItem, count: (cartItem.count || 0) + 1 };
}
return cartItem;
})
}));
} else {
cart.set((cartVal: any)=> ({
...cartVal,
items: [...cartItems, { ...product, count: 1 }]
}));
}
};
return (
<div>
<h2>🛍️ Products</h2>
<ul>
{productItems && productItems.map((productItem: ProductType, index: number) => (
<li key={index}>
{productItem.name} - ${productItem.price}{" "}
<button onClick={() => addToCart(productItem)}>Add to Cart</button>
</li>
))}
</ul>
</div>
);
};Middlewares
Middleware in state-jet is a powerful mechanism for intercepting, transforming, and processing state updates before they are applied to the store.
Unlike other libraries, you do not need to rely on any external dependencies. A middleware property from options helps to add middleware for state-jet.
function useStateGlobal<T>(
...
options?: { middleware?: [] }
)Logger Middleware
You can log your store for every action.
// file: src/store/middleware.ts
export const loggerMiddleware = (key: string, prev: number, next: number) => {
console.log(`[state-jet] ${key}: ${prev} → ${next}`);
};Create global state with loggerMiddleware
// file: src/store/index.ts
import { useStateGlobal } from "state-jet";
import { loggerMiddleware } from "./middleware";
export const counterState = useStateGlobal("counter", 0, { middleware: [loggerMiddleware] });Binding Global State to a Component
// file: src/components/Counter.tsx
import { counterState } from "../store";
export default function Counter() {
const count = counterState.useState() as number;
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => counterState.set(count - 1)}>Decrement</button>
<button onClick={() => counterState.set(count + 1)}>Increment</button>
</div>
);
}Reducer Middleware
Can't live without reducer? No worries, StateJet supports reducer middleware.
// file: src/store/middleware.ts
type Action<T> = { type: string; payload?: T };
type Middleware<T> = (
key: string,
prev: T,
next: T | Action<T> | any,
set?: (value: T) => void,
) => T | void | Promise<void>;
export const reducerMiddleware: Middleware<number> = (key, prev, action: Action<any>) => {
switch (action.type) {
case "INCREMENT":
return prev + 1;
case "DECREMENT":
return prev - 1;
case "RESET":
return 0;
default:
return prev;
}
}Create global state with reducerMiddleware
// file: src/store/index.ts
import { useStateGlobal } from "state-jet";
import { reducerMiddleware } from "./middleware";
export const counterState = useStateGlobal("counter", 0, { middleware: [reducerMiddleware] });Binding Global State to a Component
// file: src/components/Counter.tsx
import { counterState } from "../store";
export default function Counter() {
const count = counterState.useState() as number;
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => counterState.set({ type: "DECREMENT" })}>Decrement</button>
<button onClick={() => counterState.set({ type: "INCREMENT" })}>Increment</button>
<button onClick={() => counterState.set({ type: "RESET" })}>Reset</button>
</div>
);
}Debounce Middleware
You can delay the update of global state.
// file: src/store/middleware.ts
let timer: ReturnType<typeof setTimeout>;
// Debounce middleware with delay
export const debounceMiddleware = (delay: number) => {
return (key: string, prev: number, next: any, set?: (value: any) => void) => {
clearTimeout(timer);
if (set) {
timer = setTimeout(() => {
console.log(`[state-jet] Debounced: ${key} → ${next}`);
set(next); // Apply the debounced update
}, delay);
}
};
};Create global state with debounceMiddleware
// file: src/store/index.ts
import { useStateGlobal } from "state-jet";
import { debounceMiddleware } from "./middleware";
export const counterState = useStateGlobal("counter", 0, { middleware: [debounceMiddleware(500)] });Optimistic Middleware
You can optimistically update global state with rollback support.
// file: src/store/middleware.ts
export const optimisticMiddleware = (apiUrl: string) => {
return async (key: string, prev: number, next: number, set: any) => {
set(next); // Optimistically update state
try {
await fetch(apiUrl, {
method: "POST",
body: JSON.stringify({ key, value: next }),
headers: { "Content-Type": "application/json" },
});
} catch (error) {
console.warn(`[state-jet] Rollback: Failed to sync ${key}`);
set(prev); // Rollback state on failure
}
};
};Create global state with optimisticMiddleware
// file: src/store/index.ts
import { useStateGlobal } from "state-jet";
import { optimisticMiddleware } from "./middleware";
export const profileState = useStateGlobal("profile", { name: "John" }, {
middleware: [optimisticMiddleware("/update-profile")],
});Custom Middleware
You can also create your own custom middleware in state-jet.
// file: src/store/middleware.ts
export const validateAgeMiddleware = (key: string, prev: number, next: number) => {
if (next < 0) {
console.warn("Age cannot be negative!");
return prev;
}
return next;
};Create global state with validateAgeMiddleware
// file: src/store/index.ts
import { useStateGlobal } from "state-jet";
import { validateAgeMiddleware } from "./middleware";
export const ageState = useStateGlobal("age", 0, { middleware: [validateAgeMiddleware] });Binding Global State to a Component
// file: src/components/Profile.tsx
import { ageState } from "../store";
export default function Profile() {
const age = ageState.useState() as number;
return (
<div>
<h1>Age: {age}</h1>
<button
onClick={() => {
ageState.set(-5) // Age will be 0 eventhough it updated with negative value due to middleware logic
}}>
Set negative
</button>
</div>
);
}A more complete middleware usage is here.
Typescript Usage
Here is the example for creating global state with typescript definition.
interface Todo = {
id: number;
text: string;
completed: boolean
};
const todoState = useStateGlobal<Todo[]>("todos", []);Why state-jet Is More Advanced Than Zustand
- No Proxies Needed: Zustand uses proxies for state updates, but state-jet uses signals, making it even faster.
- Derived State Is Automatic: No need for selectors; state updates only trigger where necessary.
- Optimistic Updates & Rollback: Unlike Zustand, state-jet has built-in support for instant UI updates and auto-revert on failures.
- Multi-Tab Sync: Global state persists across browser tabs and devices.
- CRDT Support: Automatic conflict resolution for real-time apps, something even Zustand lacks.
FAQ
- If you want to manage your global state like
useStateas usual. - If you want to manage your global state without involving in setting up Provider Component, Dispatcher, Reducer, etc.
- If you want to see
ReduxorContext APIalternative.
Conclusion
If you need the simplest, fastest, and most advanced state management solution for React, state-jet beats Redux, Recoil, MobX, Jotai, and even Zustand in performance, reactivity, and developer experience 🚀.
Comparison Table
| Feature | Redux | Recoil | MobX | Jotai | Zustand | state-jet |
|---|---|---|---|---|---|---|
| Easy Setup | ❌ No | ❌ No | ⚠️ No | ❌ No | ⚠️ Minimal | ✅ Ultra-Minimal |
| Bundle Size | 🚀 Large | 🚀 Medium | ⚡ Small | ⚡ Small | ⚡ Small | 🔥 Ultra-Small |
| Reactivity | ⚠️ Reducers | ✅ Atoms | ✅ Proxy-Based | ✅ Signals | ✅ Proxy-Based | ✅ Signal-Like |
| Renders Only Affected | ❌ No | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes |
| Derived/Computed State | ❌ No | ✅ Yes | ✅ Yes | ✅ Yes | ⚠️ Manual Selectors | ✅ Yes (Automatic) |
| Optimistic Updates | ❌ No | ❌ No | ❌ No | ❌ No | ⚠️ Requires Middleware | ✅ Built-in |
| Undo/Redo | ❌ No | ❌ No | ❌ No | ❌ No | ⚠️ Requires Middleware | ✅ Built-in |
| CRDT Conflict Resolution | ❌ No | ❌ No | ❌ No | ❌ No | ❌ No | ✅ Yes |
Comparison with other libraries
Contributing
Development of State-jet happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving State-jet.
Publishing
Before pushing your changes to Github, make sure that version in package.json is changed to newest version. Then run npm install for synchronize it to package-lock.json and pnpm install for synchronize it to pnpm-lock.yaml
Feedbacks and Issues
Feel free to open issues if you found any feedback or issues on state-jet. And feel free if you want to contribute too! 😄
License
State-jet is MIT licensed.