File size: 1,570 Bytes
c794b6b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | # Frontend Performance Audit
## Issues Identified
### 1. Exponential Timer Stacking (Fixed)
The `useCommandApiStatus.js` hook, which performs health checks, maintained a 5000ms `setInterval`. When a check failed, it spawned a recursive `setTimeout` for backoff logic, but *failed to clear the underlying interval*. This created O(N) concurrent timers, drastically hurting main thread performance and saturating the browser's network task queue during outages.
### 2. High Frequency DOM & State Updates
Components like `AlertFeed.jsx` and `GossipGraph.jsx` trigger state updates at sub-second frequencies (`400ms` and `1500ms`).
- Uncoordinated background tasks processing WebSocket frames and polling can cause continuous React re-renders.
- Unmounted components were retaining active `setTimeout` callbacks, resulting in zombie state updates causing layout thrashing and memory leaks.
### 3. Redundant Fetch Requests
- `EmergencyPage.jsx` has multiple `setInterval` hooks (5s and 10s) pulling entire datasets (`/issues`, `/emergency/dispatch-log`, `/staff/activity`). Combined with WebSocket events, this is redundant and wastes client/server bandwidth.
## Recommendations
- **Debounce State Updates**: Batch WebSocket events or throttle high-frequency data (like bounding boxes or presence updates) to 1-2 FPS for the UI unless critically needed for rendering.
- **Cleanup Background Intervals**: Ensure strict React lifecycle management for any timers (like `setTimeout`) spawned indirectly by `setInterval` functions to prevent memory leaks and zombie updates. |