Distributed State Orchestration
I inherited a jQuery monolith where 100+ WebSocket updates per second were locking the main thread, making the dashboard unusable for high-frequency operators.
Eliminated 90% of UI lag and race conditions
The Architectural Cleanup
I implemented a "Buffered Heartbeat" model. Instead of pushing updates directly to React, we piped them into a mutable buffer and flushed them to a Zustand store every 60ms (16.6fps).
Engineering the Solution
For the most volatile cells, I bypassed React reconciliation entirely by using direct DOM subscriptions via Zustand's transient updates, ensuring 60fps even under heavy load.
The 'Who Wrote This?' Chronicles
When the WebSocket frequency spiked, the store was still causing micro-stuttering. I had to implement a "State Buffer" that prioritized visual updates over background data synchronization, keeping the UI responsive while data caught up in the background.
Strategic Trade-offs
We chose Zustand over Redux for its transient update capabilities. This gave us the performance we needed but required more discipline in enforcing store-slice boundaries manually.