Building real-time dashboards with suspense in React

16 Oct 2023

React Suspense

In today’s world, real-time data is crucial for making informed decisions. Whether it’s monitoring website analytics, tracking financial markets, or monitoring IoT devices, having up-to-date information available in a visually appealing way can significantly improve decision-making. React, a popular JavaScript library for building user interfaces, provides an efficient way to create dynamic and real-time dashboards using the suspense feature.

What is React Suspense?

React Suspense is a feature introduced in React 16.6 that allows components to “suspend” rendering while they’re waiting for asynchronous data to load. Suspense helps to simplify the process of handling and managing asynchronous data and provides a better user experience by displaying fallback content while waiting for data to load.

Building a Real-Time Dashboard

Let’s walk through the process of building a real-time dashboard using React and Suspense.

Step 1: Set up the Project

First, let’s set up a new React project using create-react-app:

npx create-react-app real-time-dashboard
cd real-time-dashboard

Step 2: Install Dependencies

Next, we’ll install some additional dependencies:

npm install axios react-chartjs-2

We’ll use the axios library to make HTTP requests and react-chartjs-2 to create interactive charts.

Step 3: Create a Data Fetching Component

We’ll create a component called DataFetcher that will be responsible for fetching the real-time data.

import React, { useState, useEffect } from "react";
import axios from "axios";

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get("https://api.example.com/data");
      setData(response.data);
    };

    fetchData();
    const intervalId = setInterval(fetchData, 5000); // Fetch data every 5 seconds

    return () => clearInterval(intervalId);
  }, []);

  return data ? (
    // Render the Dashboard component with the fetched data
    <Dashboard data={data} />
  ) : (
    // Render a loading state while fetching the data
    <p>Loading...</p>
  );
};

export default DataFetcher;

In the useEffect hook, we fetch the data from an API every 5 seconds using axios. When the component is unmounted, we clear the interval. If the data is available, we render the Dashboard component with the fetched data; otherwise, we show a loading state.

Step 4: Create the Dashboard Component

Next, let’s create the Dashboard component that will display the real-time data in an interactive way. We’ll use the react-chartjs-2 library to create a line chart.

import React from "react";
import { Line } from "react-chartjs-2";

const Dashboard = ({ data }) => {
  const chartData = {
    labels: data.map((item) => item.timestamp),
    datasets: [
      {
        label: "Value",
        data: data.map((item) => item.value),
      },
    ],
  };

  const options = {
    responsive: true,
  };

  return (
    <div>
      <h2>Real-Time Dashboard</h2>
      <Line data={chartData} options={options} />
    </div>
  );
};

export default Dashboard;

In the Dashboard component, we define the data structure required for the line chart using the fetched data and pass it to the Line component from react-chartjs-2. We also provide some basic options for the chart, such as responsiveness.

Step 5: Render the Dashboard

Finally, let’s render the DataFetcher component in the App component to display the real-time dashboard:

import React from "react";
import DataFetcher from "./DataFetcher";

const App = () => {
  return (
    <div>
      <DataFetcher />
    </div>
  );
};

export default App;

Step 6: Test the Real-Time Dashboard

Now, run the project using npm start and open the browser to see your real-time dashboard in action. The dashboard will keep updating every 5 seconds with the latest data from the API.

Conclusion

Building real-time dashboards with React Suspense is a powerful way to display real-time data in a visually appealing and interactive manner. React Suspense simplifies the process of handling asynchronous data, providing a better user experience. By following the steps outlined in this article, you can create your own real-time dashboard using React Suspense and enhance your decision-making with up-to-date information. Happy coding!