All posts

Building calm real-time UIs with WebSockets and React

11 min read
ReactWebSocketsUX

Connection states, backoff, and UI patterns that keep dashboards readable when the wire is flaky.

Real-time dashboards fail in subtle ways: not when the socket drops, but when the UI panics every reconnect. Calm interfaces encode state explicitly and surface recoverable errors.

Signal pulse over time
Media + copy row: chart on narrow viewports stacks above text.

Treat the connection as derived state from a small reducer: idle, connecting, open, backoff, closed. Pair that with a human-readable banner instead of silent failure. See also MDN WebSocket reference for API edge cases.

Backoff and UI copy

  1. Show last updated at so users trust stale numbers during reconnect.
  2. Debounce bursty messages; batch DOM updates where possible.
  3. Prefer explicit unsubscribe in StrictMode-friendly effects.
Abstract shapes
Default-width figure: use for supporting diagrams that should track reading column width.
Stacked layers
Right-aligned media column on md+.

When latency spikes, shed work before you shed users: sample expensive charts, collapse side panels, and keep primary KPIs on screen. Internal doc example: /design/realtime-states (placeholder internal link).

  • Heartbeats: cheap pings prove liveness without spamming business events.
  • Version your payloads so mixed deployments do not deserialize blindly.