| # 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. |
