Implement useEffect on for subscribing to a real-time data stream

Implement useEffect on for subscribing to a real-time data stream

Let's consider a real-time example of using useEffect for subscribing to a real-time data stream. In this example, we'll use the WebSocket API to connect to a WebSocket server and receive real-time updates.

import React, { useState, useEffect } from 'react';

function RealTimeDataExample() {
  // State variable
  const [realTimeData, setRealTimeData] = useState(null);

  // useEffect for setting up the WebSocket connection
  useEffect(() => {
    // Create a WebSocket connection
    const socket = new WebSocket('wss://example.com/socket');

    // Event listener for handling incoming messages
    const handleWebSocketMessage = (event) => {
      const newData = JSON.parse(event.data);
      setRealTimeData(newData);
    };

    // Event listener for handling errors
    const handleWebSocketError = (event) => {
      console.error('WebSocket error:', event);
    };

    // Add event listeners to the WebSocket
    socket.addEventListener('message', handleWebSocketMessage);
    socket.addEventListener('error', handleWebSocketError);

    // Clean-up function (componentWillUnmount)
    return () => {
      // Close the WebSocket connection when the component is unmounted
      socket.close();
    };
  }, []); // Empty dependency array means this effect runs once after the initial render

  // Render based on real-time data
  return (
    <div>
      <h1>Real-Time Data</h1>
      {realTimeData ? (
        <pre>{JSON.stringify(realTimeData, null, 2)}</pre>
      ) : (
        <p>Waiting for real-time updates...</p>
      )}
    </div>
  );
}

export default RealTimeDataExample;

In this example:

  • We have a componentRealTimeDataExample that connects to a WebSocket server using the WebSocket API.

  • TheuseEffect hook is used to set up the WebSocket connection. It adds event listeners for handling incoming messages and errors.

  • ThehandleWebSocketMessage function parses the incoming JSON data and updates the component's state with the real-time data.

  • The clean-up function (return () => {...}) ensures that the WebSocket connection is closed when the component is unmounted.

Conclusion:

This example demonstrates how useEffect can be used to handle real-time updates, such as those from a WebSocket or other asynchronous data sources. The component sets up the connection when it mounts and cleans up the connection when it unmounts.

Did you find this article valuable?

Support LingarajTechhub All About Programming by becoming a sponsor. Any amount is appreciated!