Memory leak detection run

Memory leaks in browser applications compound silently over a user session. A useEffect that registers a resize listener without a cleanup function adds a listener on every re-render; after 50 renders, 50 listeners are firing simultaneously. ISO 25010:2011 resource-utilisation frames the waste; the user-visible outcome is an application that slows, stutters, or crashes after extended use — worst for users who keep tabs open for hours, such as internal tooling users or power users of dashboards.

Profile heap usage in Chrome DevTools (Memory tab → Take heap snapshot before and after navigating key flows). For every useEffect that subscribes to an event or starts an interval, return a cleanup function.

// components/realtime-widget.tsx
useEffect(() => {
  const handler = (e: MessageEvent) => handleUpdate(e.data)
  socket.addEventListener('message', handler)
  return () => socket.removeEventListener('message', handler)  // cleanup required
}, [])