state-jet 2.0.5 → 2.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -48
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -53,6 +53,45 @@ function Counter() {
|
|
|
53
53
|
return <button onClick={() => counter.set(count + 1)}>Count: {count}</button>;
|
|
54
54
|
}
|
|
55
55
|
```
|
|
56
|
+
## ⚡ Why state-jet Is More Advanced Than Zustand
|
|
57
|
+
|
|
58
|
+
- **No Proxies Needed** → Zustand uses proxies for state updates, but state-jet uses signals, making it even faster.
|
|
59
|
+
- **Derived State Is Automatic** → No need for selectors; state updates only trigger where necessary.
|
|
60
|
+
- **Optimistic Updates & Rollback** → Unlike Zustand, state-jet has built-in support for instant UI updates and auto-revert on failures.
|
|
61
|
+
- **Multi-Tab Sync** → global state persists across browser tabs and devices.
|
|
62
|
+
- **CRDT Support** → Automatic conflict resolution for real-time apps, something even Zustand lacks.
|
|
63
|
+
|
|
64
|
+
### ✅Conclusion
|
|
65
|
+
|
|
66
|
+
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. 🚀
|
|
67
|
+
|
|
68
|
+
## Create Slice
|
|
69
|
+
|
|
70
|
+
```bash
|
|
71
|
+
import { useSlice } from "state-jet";
|
|
72
|
+
|
|
73
|
+
export const useProductSlice = () => useSlice("products")("list", []);
|
|
74
|
+
|
|
75
|
+
export const useCartSlice = () =>
|
|
76
|
+
useSlice("cart")("items", []);
|
|
77
|
+
|
|
78
|
+
export const useUserSlice = () => useSlice("user")("info", null);
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Create Store
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
import { useStore } from "state-jet";
|
|
85
|
+
import { useProductSlice, useCartSlice, useUserSlice } from "./slices";
|
|
86
|
+
|
|
87
|
+
const initializer: any = () => ({
|
|
88
|
+
products: useProductSlice(),
|
|
89
|
+
cart: useCartSlice(),
|
|
90
|
+
user: useUserSlice()
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
export const useEcommerceStore = () => useStore(initializer);
|
|
94
|
+
```
|
|
56
95
|
|
|
57
96
|
## ⚡ Comparison Table
|
|
58
97
|
| Feature | Redux | Recoil | MobX | Jotai | Zustand | state-jet |
|
|
@@ -67,54 +106,6 @@ function Counter() {
|
|
|
67
106
|
| **CRDT Conflict Resolution** | ❌ No | ❌ No | ❌ No | ❌ No | ❌ No | ✅ Yes |
|
|
68
107
|
|
|
69
108
|
|
|
70
|
-
## ⚡ Why state-jet Is More Advanced Than Zustand
|
|
71
|
-
|
|
72
|
-
- **No Proxies Needed** → Zustand uses proxies for state updates, but state-jet uses signals, making it even faster.
|
|
73
|
-
- **Derived State Is Automatic** → No need for selectors; state updates only trigger where necessary.
|
|
74
|
-
- **Optimistic Updates & Rollback** → Unlike Zustand, state-jet has built-in support for instant UI updates and auto-revert on failures.
|
|
75
|
-
- **Multi-Tab Sync** → global state persists across browser tabs and devices.
|
|
76
|
-
- **CRDT Support** → Automatic conflict resolution for real-time apps, something even Zustand lacks.
|
|
77
|
-
|
|
78
|
-
✅ Conclusion
|
|
79
|
-
|
|
80
|
-
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. 🚀
|
|
81
|
-
|
|
82
|
-
## 🎯 Why Use `optimisticUpdate`?
|
|
83
|
-
|
|
84
|
-
| Feature | Without `optimisticUpdate` | With `optimisticUpdate` |
|
|
85
|
-
| ----------------------- | -------------------------- | --------------------------- |
|
|
86
|
-
| **UI Responsiveness** | Delayed (Waits for API) | Instant update (Optimistic) |
|
|
87
|
-
| **User Experience** | Slow & Janky | Fast & Smooth |
|
|
88
|
-
| **Rollback on Failure** | Manual Handling | Automatic |
|
|
89
|
-
| **Code Complexity** | High | Low |
|
|
90
|
-
|
|
91
|
-
## 🎯 Why Use `syncCRDT`?
|
|
92
|
-
|
|
93
|
-
| Feature | Without `syncCRDT` | With `syncCRDT` |
|
|
94
|
-
| ---------------------- | ------------------ | -------------------------- |
|
|
95
|
-
| **Multi-User Sync** | Possible Conflicts | ✅ Automatic Merging |
|
|
96
|
-
| **Real-Time Updates** | Needs Manual Fixes | ✅ No Data Loss |
|
|
97
|
-
| **Handles Conflicts** | Can Lose Changes | ✅ Merges Automatically |
|
|
98
|
-
| **Scalable for Teams** | Hard to Maintain | ✅ Ideal for Collaboration |
|
|
99
|
-
|
|
100
|
-
## 🎯 Why Use `derivedState`?
|
|
101
|
-
|
|
102
|
-
| Feature | Without `derivedState` | With `derivedState` |
|
|
103
|
-
| ------------------------- | --------------------------- | ------------------------------ |
|
|
104
|
-
| **Manual Recalculations** | ❌ Yes (Recompute manually) | ✅ Automatic |
|
|
105
|
-
| **Reactivity** | ❌ Requires `useEffect` | ✅ Updates only when needed |
|
|
106
|
-
| **Performance** | ❌ Unoptimized | ✅ Only recalculates on change |
|
|
107
|
-
| **Code Complexity** | ❌ High | ✅ Minimal |
|
|
108
|
-
|
|
109
|
-
## 🎯 Why Use `undo & redo`?
|
|
110
|
-
|
|
111
|
-
| Feature | Without Undo/Redo | With Undo/Redo |
|
|
112
|
-
| ---------------------- | ------------------------ | -------------------------- |
|
|
113
|
-
| **Accidental Changes** | ❌ Lost forever | ✅ Easily undone |
|
|
114
|
-
| **User Experience** | ❌ Frustrating | ✅ Smooth & intuitive |
|
|
115
|
-
| **Multi-Step Editing** | ❌ Hard to track | ✅ Easy to restore history |
|
|
116
|
-
| **Performance** | ❌ Needs manual tracking | ✅ Automatic |
|
|
117
|
-
|
|
118
109
|
## Contributing
|
|
119
110
|
|
|
120
111
|
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.
|