The Chaotic Bug: The Infinite State Loop & Memory Leak
In a real-time clinical AI health suite, high-frequency telemetry streaming (such as 60Hz ECG canvas updates) demands surgical precision. During heavy load testing, our frontend performance suddenly degraded: CPU thread usage hit 98%, heap memory ballooned to over 1.4 GB, and DOM frame rendering dropped to single digits.
The Root Cause
A subtle React useEffect hook listening to the incoming WebSocket data stream contained the state setter inside its dependency array:
// ❌ THE CHAOTIC BUG (Caused infinite state sync re-renders)
