react-state-basis 0.5.1 → 0.6.0
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 +21 -17
- package/dist/index.js +509 -118
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +509 -118
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -62,18 +62,18 @@ const [a, setA] = useState(0);
|
|
|
62
62
|
const [b, setB] = useState(0);
|
|
63
63
|
|
|
64
64
|
useEffect(() => {
|
|
65
|
-
setB(a); // ⚡ BASIS: "Double Render Detected"
|
|
65
|
+
setB(a + 1); // ⚡ BASIS: "Double Render Detected"
|
|
66
66
|
}, [a]);
|
|
67
67
|
|
|
68
68
|
return <button onClick={() => setA(a + 1)}>Pulse Basis</button>;
|
|
69
69
|
```
|
|
70
70
|
|
|
71
|
-
Click the button. You should see this in your console
|
|
71
|
+
Click the button. You should see this in your console:
|
|
72
72
|
```
|
|
73
73
|
⚡ BASIS | DOUBLE RENDER
|
|
74
74
|
📍 Location: YourComponent.tsx
|
|
75
|
-
Issue:
|
|
76
|
-
Fix: Derive b during the
|
|
75
|
+
Issue: effect_L5 triggers b in a separate frame.
|
|
76
|
+
Fix: Derive b during the render phase (remove effect) or wrap in useMemo.
|
|
77
77
|
```
|
|
78
78
|
|
|
79
79
|
---
|
|
@@ -92,19 +92,23 @@ Fix: Derive b during the first render.
|
|
|
92
92
|
The optional HUD shows your **State Basis Matrix** in real-time. Purple pulses ($\Omega$) are Context anchors; Red pulses (!) are redundant shadows.
|
|
93
93
|
|
|
94
94
|
<p align="center">
|
|
95
|
-
<img src="./assets/050Basis.gif" width="800" alt="Basis
|
|
95
|
+
<img src="./assets/050Basis.gif" width="800" alt="Basis Demo" />
|
|
96
96
|
</p>
|
|
97
97
|
|
|
98
|
+
> **Note:** While the HUD visualizes real-time updates, the **Architectural Health Report** (Console) provides the deep topological analysis.
|
|
99
|
+
|
|
98
100
|
---
|
|
99
101
|
|
|
100
102
|
## What Basis Detects
|
|
101
103
|
|
|
102
|
-
Basis
|
|
104
|
+
Basis uses **Graph Theory**, **Signal Processing**, and **Linear Algebra** to identify architectural violations that static linters miss:
|
|
103
105
|
|
|
104
|
-
-
|
|
105
|
-
-
|
|
106
|
-
- **⚡
|
|
107
|
-
-
|
|
106
|
+
- **⚡ Double Renders (Sync Leaks)** - Detects when a `useEffect` triggers a state update immediately after a render, forcing the browser to paint twice.
|
|
107
|
+
- **⚡ Prime Movers (Root Causes)** - Ignores downstream symptoms and points you to the exact hook or event that started the chain reaction.
|
|
108
|
+
- **⚡ Fragmented Updates** - Detects when a single click forces updates in multiple different files/contexts simultaneously (Tearing risk).
|
|
109
|
+
- **Ω Context Mirroring** - Detects when you redundanty copy Global Context data into Local State (creating two sources of truth).
|
|
110
|
+
- **♊ Duplicate State** - Identifies variables that always update at the exact same time and should be merged (e.g. `isLoading` + `isSuccess`).
|
|
111
|
+
- **🛑 Infinite Loops** - A safety circuit-breaker that kills the auditor before a recursive update freezes your browser.
|
|
108
112
|
|
|
109
113
|
[**See examples & fixes →**](https://github.com/liovic/react-state-basis/wiki/The-Forensic-Catalog)
|
|
110
114
|
|
|
@@ -115,9 +119,9 @@ Basis treats every hook as a signal to catch these architectural violations:
|
|
|
115
119
|
### Architectural Health Report
|
|
116
120
|
Check your entire app's state architecture by running `window.printBasisReport()` in the console.
|
|
117
121
|
|
|
118
|
-
* **
|
|
119
|
-
* **
|
|
120
|
-
* **
|
|
122
|
+
* **Refactor Priorities:** Uses **Spectral Influence** (Eigenvector Centrality) to rank bugs by their systemic impact. It tells you *what* to fix first.
|
|
123
|
+
* **Efficiency Score:** A calculated percentage of how "clean" your architecture is (Sources of Truth - Causal Leaks).
|
|
124
|
+
* **Sync Issues:** Groups entangled variables into clusters (e.g., Boolean Explosions).
|
|
121
125
|
|
|
122
126
|
### Hardware Telemetry
|
|
123
127
|
Verify engine efficiency and heap stability in real-time via `window.getBasisMetrics()`.
|
|
@@ -129,7 +133,7 @@ Verify engine efficiency and heap stability in real-time via `window.getBasisMet
|
|
|
129
133
|
Basis is verified against industry-standard codebases to ensure high-fidelity detection:
|
|
130
134
|
|
|
131
135
|
* **Excalidraw (114k⭐)** - Caught a theme-sync leak forcing a double-render on every toggle. [**PR #10637**](https://github.com/excalidraw/excalidraw/pull/10637)
|
|
132
|
-
* **shadcn-admin (10k⭐)** - Detected redundant state pattern in viewport detection hooks. [**PR #274**](https://github.com/satnaing/shadcn-admin/pull/274)
|
|
136
|
+
* **shadcn-admin (10k⭐)** - Detected redundant state pattern in viewport detection hooks. [**PR #274**](https://github.com/satnaing/shadcn-admin/pull/274) (MERGED)
|
|
133
137
|
|
|
134
138
|
---
|
|
135
139
|
|
|
@@ -145,7 +149,7 @@ Basis is verified against industry-standard codebases to ensure high-fidelity de
|
|
|
145
149
|
|
|
146
150
|
## Documentation & Theory
|
|
147
151
|
|
|
148
|
-
Basis is built on heuristics inspired by **Linear Algebra
|
|
152
|
+
Basis is built on heuristics inspired by **Signal Processing**, **Linear Algebra**, and **Graph Theory**. To understand the underlying math, visit the [**Full Wiki**](https://github.com/liovic/react-state-basis/wiki).
|
|
149
153
|
|
|
150
154
|
---
|
|
151
155
|
|
|
@@ -154,8 +158,8 @@ Basis is built on heuristics inspired by **Linear Algebra** and **Signal Process
|
|
|
154
158
|
Each era of Basis answers a different architectural question:
|
|
155
159
|
|
|
156
160
|
✓ **v0.4.x** - The Correlation Era - *Are these states moving together?*
|
|
157
|
-
|
|
158
|
-
**v0.6.x** - The Graph Era - *Which bug should I fix first for maximum impact?*
|
|
161
|
+
✓ **v0.5.x** - The Decomposition Era - *Is this local state just a copy of Context?*
|
|
162
|
+
→ **v0.6.x** - The Graph Era - *Which bug should I fix first for maximum impact?*
|
|
159
163
|
**v0.7.x** - The Information Era - *Does this state carry real information, or is it derivative?*
|
|
160
164
|
**v0.8.x** - The Manifold Era - *How many hooks does your component actually need?*
|
|
161
165
|
|