lpetronika
Born on December 26, 2025•1 Karma
I've been building react-state-basis, a runtime auditor for React state architecture.
The project is inspired by a simple idea from linear algebra: a "basis" is a minimal set of independent vectors. In React, many apps suffer from state that is "linearly dependent" -variables that always move in sync and should really be derived values or a single source of truth.
The tool ignores state values entirely. Instead, it tracks the high-resolution timing of state updates and hook firings. It treats these updates as temporal signals to identify redundant state and reveal hidden "sync leaks" (causal chains) that static analysis usually misses.
What’s new in v0.4.0: I recently moved the engine from simple binary snapshots to Temporal Cross-Correlation (Lead-Lag analysis). Instead of just asking if two states update at the same time, the engine now checks across multiple "temporal planes." It can detect if State B consistently follows State A with a phase shift, allowing it to distinguish between simple redundancy and causal update chains.
Real-World Results: I validated the v0.4.0 engine by running it on Excalidraw (114k stars). It successfully identified a causal sync leak in their theme-switching logic - a manual useEffect synchronization that was causing an unnecessary double-render. I submitted a PR to replace it with a computed value: https://github.com/excalidraw/excalidraw/pull/10637
Engineering Highlights:
Pointer-based Offsets: Uses index offsets to perform temporal analysis directly on raw history buffers, avoiding array slicing (.slice()) or creating temporary objects that cause GC micro-stutters.
Lead-Lag Analysis: Evaluates the correlation across three temporal planes (Sync, Lead, and Lag) to determine the "Direction of Flow" between variables (A → B).
Circuit Breaker: Detects high-frequency state oscillations and halts execution before the browser thread locks up.
Zero Production Overhead: The entire library is replaced with no-op shims in production builds via environment-aware exports.
I’m trying to bridge the gap between "State Management" and "Signal Processing." I’d love to hear your thoughts on using temporal correlation as a heuristic for architectural debt.
The results were interesting: the system hit 100% Basis Efficiency (mathematical rank of 12/12), but the causality engine flagged a 'Double Render Cycle' in the use-mobile hook where state was being manually synchronized within an effect.
It's a good example of how a system can be mathematically sound (no redundant state) but still have execution-level bottlenecks that are invisible to static analysis.
Just pushed v0.2.3 with full React API parity and 100% test coverage on hooks.
I’ve been a software engineer for 10 years. For a long time, I viewed "application state" as just a collection of variables and logic. I was effective, but I felt like I was missing the underlying structure of why state becomes messy.
Recently, I started studying linear algebra (Axler’s "Linear Algebra Done Right"). It opened a "third eye" for me. I realized that redundant state in a React app is essentially "linear dependence." If two or more state variables always update in perfect sync, they aren't adding new information-they are just redundant dimensions in your application's state space.
I spent my holiday break building react-state-basis. It’s a real-time architectural auditor that monitors your state transitions as vectors to find these redundancies.
What the tool does:
Redundancy Detection: It identifies state variables that move in perfect synchronization (collinear) and suggests refactoring them into a single source of truth or a derived value (useMemo).
Causality Tracking: It traces useEffect chains to find "Double Render Cycles" where one state update unnecessarily triggers another.
Infinite Loop Protection: It includes a "Circuit Breaker" that detects high-speed oscillations and halts execution before the browser thread locks up.
System Health Score: It analyzes your entire state architecture to give you an efficiency score based on how many variables are actually independent.
I built a Babel plugin to handle automatic labeling, so you don't have to manually name your states. It’s designed as a development-time tool—you can easily swap back to standard React imports for your production build.
I’m a solo dev and this is my first open-source project. I’d love to hear what you think about this approach to state auditing.