How to implement long polling for React + axios

Long polling is a network communication technique used to retrieve data from the server, enabling the server to push updates to the client immediately when data is available. In React applications, we can implement long polling using axios. Below are the implementation steps and relevant code examples.

Step 1: Create a React Component

First, we create a React component where we will set up the long polling logic.

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        console.error('Fetching data failed:', error);
      } finally {
        // Set the polling interval to 10 seconds
        setTimeout(fetchData, 10000);
      }
    };

    fetchData();

    // Cleanup function that clears the timer when the component unmounts
    return () => clearTimeout(fetchData);
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
}

export default DataFetcher;

Step 2: Polling Logic

In the above code, we define a React component named DataFetcher. In this component, we use the useEffect hook to manage data fetching and updating logic.

1. Request Data: Use the get method of axios to request data from the server.
2. Handle Response: Set the response data to the state variable data.
3. Set Polling: Use setTimeout to repeatedly call the fetchData function, triggering data requests at regular intervals (e.g., every 10 seconds).
4. Cleanup Timer: In the return function of useEffect, we clear the timer to prevent memory leaks caused by the timer continuing to execute after the component unmounts.

Step 3: Using the Component

In other parts of the application, you can directly use the DataFetcher component to display and update data.

jsx
import React from 'react';
import ReactDOM from 'react-dom';
import DataFetcher from './DataFetcher';

function App() {
  return (
    <div>
      <h1>Real-time Data</h1>
      <DataFetcher />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Summary

Implementing long polling with React and axios primarily involves setting up periodic network requests and managing the timer using React's lifecycle. The above example demonstrates how to implement this functionality within the component and ensure resources are properly released when no longer needed. This method is highly useful in applications requiring real-time data updates.