Custom Hook for Real-Time Data Updating in Charts

Create a custom React hook that fetches real-time data and updates the chart, demonstrating efficient data fetching and state management for dynamic chart updates.

import { useEffect, useState } from 'react';

export const useRealTimeData = (url) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const ws = new WebSocket(url);
    ws.onmessage = (event) => {
      const newData = JSON.parse(event.data);
      setData((prevData) => [...prevData, ...newData]);
    };
    return () => ws.close();
  }, [url]);

  return data;
};

Defines a custom React hook, useRealTimeData, which takes a WebSocket URL as an argument. It sets up a WebSocket connection to the provided URL and listens for incoming messages. When a new message is received, it parses the JSON data and updates the state by appending the new data to the existing data array. The hook returns the latest data, allowing a React component to consume and display it. The useEffect cleanup function ensures the WebSocket connection is closed when the component unmounts or the URL changes.

import React from 'react';
import { Line } from 'react-chartjs-2';
import { useRealTimeData } from './useRealTimeData';

const RealTimeChart = ({ url }) => {
  const realTimeData = useRealTimeData(url);

  const chartData = {
    labels: realTimeData.map((item) => item.timestamp),
    datasets: [
      {
        label: 'Real-Time Data',
        data: realTimeData.map((item) => item.value),
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }
    ]
  };

  return <Line data={chartData} />;
};

Implements a React component, RealTimeChart, which uses the custom useRealTimeData hook to fetch real-time data from a WebSocket server. This component maps the fetched data to the format expected by react-chartjs-2's Line component, generating a chart that updates in real-time as new data arrives. The chartData object's labels and datasets are dynamically populated with timestamps and values from the incoming data.