Keeping React dashboards fast as the data grows

Dashboards degrade in a predictable way: fine with test data, sluggish with a real account, unusable for the largest customer. The causes are usually the same handful of patterns.

Separate server state from UI state

Data fetched from an API is not the same thing as whether a drawer is open. Treating both as one blob means every poll re-renders the whole interface. Keep fetched data in a cache layer with its own invalidation, and keep genuine UI state local to the component that owns it.

Render only what is visible

A table of ten thousand rows does not need ten thousand DOM nodes. Virtualise long lists so the browser only builds what is on screen. This single change is often the difference between a half-second interaction and a frozen tab.

Move work out of render

• Sort, filter and aggregate on the server where the data already lives.
• Memoise expensive derivations so they are not recalculated on unrelated updates.
• Debounce anything driven by typing before it reaches the network.

Paginate honestly

Offset pagination drifts when rows are inserted while a user is paging. Cursor-based pagination is slightly more work to implement and considerably more correct on data that changes underneath you.

Measure with real volumes

Profile with a copy of production-sized data, not a seeded fixture. Performance problems that only appear at scale are invisible in development, which is exactly why they reach customers.