[Feature]: State size tracking and growth alerts

[omoladeodetara]

Problem Statement

The NgRx store can grow silently over time entity collections that are never cleared, accumulated history, unbounded caches. This causes both memory pressure and slower serialization on every STATE_CHANGE message. Currently nothing in the DevTool tracks or alerts on store size.

The full prevState and nextState are already sent over WebSocket on every action, so the data is available.

Proposed Solution

Compute the serialized state size (in KB) for each STATE_CHANGE message and surface it in the performance panel.

Changes required:

• performance-panel.component.ts:
  • Compute stateSize = JSON.stringify(nextState).length / 1024 for each incoming message
  • Add stateSize to RenderEntry
  • Add a summary card showing current state size
  • Track size over time to detect growth trends (flag if size has grown >20% since session start)
• performance-panel.component.html:
  • Add State Size (KB) column to the slowest renders table
  • Add a warning banner when state size exceeds a threshold (default 500 KB) or grows rapidly

No core library changes needed nextState is already in STATE_CHANGE messages.

Alternatives Considered

Tracking state size in the meta-reducer adds serialization cost to every reducer call. Computing it in the UI from already-received data is free.

Component

Performance Panel (ngrx-devtool-ui)