Managing WebSocket Connections for Real-Time React Dashboards

Previously in this course, we explored managing global modals to decouple UI overlays from component trees. In this lesson, we shift our focus from static state to real-time data flow by managing WebSocket connections to keep your dashboard metrics live.

The Real-Time Challenge

While we’ve mastered the asynchronous data lifecycle using REST and React Query, those patterns are pull-based. You request data, you get data. WebSockets enable a push-based model where the server alerts your client the moment a metric changes.

Integrating this into React requires careful orchestration. Because WebSockets maintain a persistent state (the connection itself), they don't play as nicely with React's declarative re-render cycles as simple fetch requests do.

Managing WebSocket Connections with Hooks

To manage a WebSocket connection properly, we need to handle three phases:

1. Initialization: Opening the connection when the component mounts.
2. Event Listening: Updating state when the server pushes a message.
3. Cleanup: Closing the connection when the component unmounts to prevent memory leaks.

Here is a robust implementation of a useWebSocket hook:

JAVASCRIPT
import { useEffect, useState, useRef } from CE9178">'react';

export const useWebSocket = (url) => {
  const [data, setData] = useState(null);
  const socketRef = useRef(null);

  useEffect(() => {
    // Initialize connection
    socketRef.current = new WebSocket(url);

    socketRef.current.onmessage = (event) => {
      const parsedData = JSON.parse(event.data);
      setData(parsedData);
    };

    // Cleanup on unmount
    return () => {
      if (socketRef.current) {
        socketRef.current.close();
      }
    };
  }, [url]);

  return data;
};

Integrating Live Updates into the Dashboard

Now, let’s advance our running project by adding a "Live Metrics" card to the dashboard. Instead of polling the server every five seconds, we’ll use our new hook to listen for incoming updates.

JSX
const LiveMetrics = () => {
  const latestMetric = useWebSocket(CE9178">'wss://api.dashboard.com/metrics');

  if (!latestMetric) return <div>Waiting for live data...</div>;

  return (
    <div className="card">
      <h3>Live System Load</h3>
      <p>{latestMetric.value}%</p>
    </div>
  );
};

Hands-on Exercise

1. Extend the useWebSocket hook above to include an isConnected boolean state.
2. Update the onopen and onclose handlers to toggle this state.
3. In your LiveMetrics component, display a "Connection Lost" warning banner if isConnected is false.

Common Pitfalls

• Stale Closures: If your onmessage handler needs to access current state, ensure you are using the functional update pattern (setData(prev => ...)) or that the handler is recreated correctly via useCallback and added to the dependency array.
• Reconnection Logic: Native WebSockets don't auto-reconnect. In production, you must implement a backoff strategy (e.g., trying to reconnect after 1s, then 2s, then 4s) inside the onclose event.
• JSON Serialization: Always wrap JSON.parse in a try...catch block. Malformed messages from the server can crash your entire component tree if not handled defensively.

Recap

Managing WebSocket connections requires treating the socket instance as a persistent resource. By wrapping the lifecycle in useEffect and using useRef to hold the connection instance, we prevent unnecessary re-connections while ensuring our UI remains reactive to server-side events.

Up next: We will explore integrating WebSockets with global state management to share real-time data across multiple dashboard widgets simultaneously.