react-state-basis 0.6.2 → 0.6.3
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 +24 -24
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -25,7 +25,7 @@ npm i react-state-basis
|
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
### 2. Setup (Vite)
|
|
28
|
-
Add the plugin to your `vite.config.ts`. The Babel plugin auto-labels your hooks
|
|
28
|
+
Add the plugin to your `vite.config.ts`. The Babel plugin auto-labels your hooks - you continue importing from `react` as normal.
|
|
29
29
|
|
|
30
30
|
```ts
|
|
31
31
|
import { defineConfig } from 'vite';
|
|
@@ -57,7 +57,7 @@ root.render(
|
|
|
57
57
|
```
|
|
58
58
|
|
|
59
59
|
### 4. Verify the Signal
|
|
60
|
-
Drop this pattern into any component. Basis
|
|
60
|
+
Drop this pattern into any component. For this pattern, Basis typically flags the rhythm of the debt within ~100ms; detection latency can vary for other patterns.
|
|
61
61
|
|
|
62
62
|
```tsx
|
|
63
63
|
const [a, setA] = useState(0);
|
|
@@ -81,7 +81,7 @@ Fix: Derive b during the render phase (remove effect) or wrap in useMemo.
|
|
|
81
81
|
---
|
|
82
82
|
|
|
83
83
|
### 5. Control & Scope
|
|
84
|
-
* **Ghost Mode:** Disable the
|
|
84
|
+
* **Ghost Mode:** Disable the visual overlay while keeping console-based forensics active by setting `showHUD={false}` on the provider.
|
|
85
85
|
* **Selective Auditing:** Add `// @basis-ignore` at the top of any file to disable instrumentation. Recommended for:
|
|
86
86
|
* High-frequency animation logic (>60fps)
|
|
87
87
|
* Third-party library wrappers
|
|
@@ -91,28 +91,28 @@ Fix: Derive b during the render phase (remove effect) or wrap in useMemo.
|
|
|
91
91
|
|
|
92
92
|
## HUD
|
|
93
93
|
|
|
94
|
-
The optional
|
|
94
|
+
The optional overlay shows your component's state updates in real time. Purple pulses mark updates coming from Context; red pulses mark state that looks like a redundant copy of something else.
|
|
95
95
|
|
|
96
96
|
<p align="center">
|
|
97
97
|
<img src="./assets/050Basis.gif" width="800" alt="Basis Demo" />
|
|
98
98
|
</p>
|
|
99
99
|
|
|
100
|
-
> **Note:**
|
|
100
|
+
> **Note:** The HUD shows updates as they happen. The **Architectural Health Report** (Console) looks at the whole update graph together, so it can catch patterns a single glance at the HUD would miss.
|
|
101
101
|
|
|
102
102
|
---
|
|
103
103
|
|
|
104
104
|
## What Basis Detects
|
|
105
105
|
|
|
106
|
-
Basis
|
|
106
|
+
Basis watches *when* your state updates and looks for timing patterns that usually mean architectural debt - two states always changing together, an effect immediately re-triggering a render, a click that fans out into updates across unrelated files. Every flag below is a signal to investigate, not a verified defect:
|
|
107
107
|
|
|
108
|
-
- **⚡ Double Renders (Sync Leaks)** -
|
|
109
|
-
- **⚡ Prime Movers (Root Causes)** -
|
|
110
|
-
- **⚡ Fragmented Updates** -
|
|
111
|
-
-
|
|
112
|
-
-
|
|
108
|
+
- **⚡ Double Renders (Sync Leaks)** - A `useEffect` triggers a state update immediately after a render, forcing the browser to paint twice.
|
|
109
|
+
- **⚡ Prime Movers (Likely Root Causes)** - Skips downstream symptoms and points you to the hook or event most likely to have started the chain reaction. When multiple updates fire in the same tick, Basis ranks candidates by their position in the update graph rather than asserting a single definitive cause.
|
|
110
|
+
- **⚡ Fragmented Updates** - A single click forces updates in multiple different files or contexts at once (tearing risk).
|
|
111
|
+
- **Context Mirroring** - You're redundantly copying Global Context data into local state, creating two sources of truth.
|
|
112
|
+
- **Duplicate State** - Two variables always update at the exact same time and should probably be merged (e.g. `isLoading` + `isSuccess`).
|
|
113
113
|
- **🛑 Infinite Loops** - A safety circuit-breaker that kills the auditor before a recursive update freezes your browser.
|
|
114
114
|
|
|
115
|
-
[**See examples & fixes →**](https://github.com/liovic/react-state-basis/wiki/The-Forensic-Catalog)
|
|
115
|
+
Under the hood this is timing correlation over an update graph - ideas borrowed loosely from graph theory and signal processing, not a formal proof. [**See examples & fixes →**](https://github.com/liovic/react-state-basis/wiki/The-Forensic-Catalog)
|
|
116
116
|
|
|
117
117
|
---
|
|
118
118
|
|
|
@@ -121,9 +121,9 @@ Basis draws on ideas from graph theory, signal processing, and linear algebra to
|
|
|
121
121
|
### Architectural Health Report
|
|
122
122
|
Check your entire app's state architecture by running `window.printBasisReport()` in the console.
|
|
123
123
|
|
|
124
|
-
* **Refactor Priorities:** Ranks issues
|
|
124
|
+
* **Refactor Priorities:** Ranks issues by blast radius on the update graph, so you can see which hook or event has the widest fan-out across the rest of your app.
|
|
125
125
|
* **Efficiency Score:** A rough ratio of independent update sources vs effect-driven follow-up updates. Diagnostic, not a grade.
|
|
126
|
-
* **Sync Issues:** Groups
|
|
126
|
+
* **Sync Issues:** Groups variables that tend to update together into clusters (e.g., boolean pairs that are really one piece of state).
|
|
127
127
|
|
|
128
128
|
### Hardware Telemetry
|
|
129
129
|
Verify engine efficiency and heap stability in real-time via `window.getBasisMetrics()`.
|
|
@@ -132,7 +132,7 @@ Verify engine efficiency and heap stability in real-time via `window.getBasisMet
|
|
|
132
132
|
|
|
133
133
|
## Real-World Evidence
|
|
134
134
|
|
|
135
|
-
Basis
|
|
135
|
+
Basis has been tested against industry-standard codebases:
|
|
136
136
|
|
|
137
137
|
* **Excalidraw (114k⭐)** - Proposed a theme-sync fix [**PR #10637**](https://github.com/excalidraw/excalidraw/pull/10637) (not merged)
|
|
138
138
|
* **shadcn-admin (10k⭐)** - Detected redundant state pattern in viewport detection hooks. [**PR #274**](https://github.com/satnaing/shadcn-admin/pull/274) (merged)
|
|
@@ -144,7 +144,7 @@ Basis is verified against industry-standard codebases to ensure high-fidelity de
|
|
|
144
144
|
### Zustand
|
|
145
145
|
|
|
146
146
|
Wrap your store with `basisLogger` to give Basis visibility into external
|
|
147
|
-
store updates. Store signals appear
|
|
147
|
+
store updates. Store signals appear in the HUD and health report alongside your React state.
|
|
148
148
|
|
|
149
149
|
```typescript
|
|
150
150
|
import { create } from 'zustand';
|
|
@@ -183,19 +183,19 @@ Planned: XState, React Query, Redux Toolkit. Community PRs welcome.
|
|
|
183
183
|
|
|
184
184
|
## Documentation & Theory
|
|
185
185
|
|
|
186
|
-
|
|
186
|
+
The engine uses graph and timing heuristics to infer likely architectural issues from *when* state changes, not *what* it changes to. [**The wiki**](https://github.com/liovic/react-state-basis/wiki) explains the full mental model, the math it borrows from, and the engine internals. It is a heuristic, not a proof.
|
|
187
187
|
|
|
188
188
|
---
|
|
189
189
|
|
|
190
190
|
## Roadmap
|
|
191
191
|
|
|
192
|
-
Each
|
|
192
|
+
Each version answers a different architectural question:
|
|
193
193
|
|
|
194
|
-
✓ **v0.4.x** -
|
|
195
|
-
✓ **v0.5.x** -
|
|
196
|
-
→ **v0.6.x** -
|
|
197
|
-
**v0.7.x** -
|
|
198
|
-
**v0.8.x** -
|
|
194
|
+
✓ **v0.4.x** - Detect states that always move together *(The Correlation Era)*
|
|
195
|
+
✓ **v0.5.x** - Detect local copies of Context *(The Decomposition Era)*
|
|
196
|
+
→ **v0.6.x** - Rank which update fans out widest *(The Graph Era)*
|
|
197
|
+
**v0.7.x** - Detect derivative vs. independent state *(The Information Era)*
|
|
198
|
+
**v0.8.x** - Estimate how much local state a component actually needs *(The Manifold Era)*
|
|
199
199
|
|
|
200
200
|
|
|
201
201
|
[**More info**](https://github.com/liovic/react-state-basis/wiki/Roadmap)
|
|
@@ -206,4 +206,4 @@ Each era of Basis answers a different architectural question:
|
|
|
206
206
|
|
|
207
207
|
Built by [LP](https://github.com/liovic) • [MIT License](https://opensource.org/licenses/MIT)
|
|
208
208
|
|
|
209
|
-
</div>
|
|
209
|
+
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-state-basis",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.3",
|
|
4
4
|
"description": "Runtime state profiler for React that detects redundant state, update chains, and infinite loops by tracking when state updates happen.",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -99,6 +99,7 @@
|
|
|
99
99
|
"@testing-library/dom": "^10.4.1",
|
|
100
100
|
"@testing-library/jest-dom": "^6.9.1",
|
|
101
101
|
"@testing-library/react": "^16.3.1",
|
|
102
|
+
"@types/babel__core": "^7.20.5",
|
|
102
103
|
"@types/node": "^22.0.0",
|
|
103
104
|
"@types/react": "^19.2.7",
|
|
104
105
|
"@types/react-dom": "^19.2.3",
|