audit/performance.md

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.