Implement custom usePolling hook in React

API polling is a common requirement in frontend development to fetch data from a server at regular intervals. In React, we can create a custom usePolling hook to encapsulate the logic of fetching data at specified intervals.

This blog post will cover the code implementation and usage of the custom usePolling hook in React.

What you need to know

1. Understanding of React hooks
2. Fetch API call implementation

Code Implementation - usePolling Hook

Let's create a custom usePolling hook that fetches data from an API endpoint at regular intervals.

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

const usePolling = (url, interval) => {
    const [data, setData] = useState(null);

    const fetchData = async () => {
        try {
            const response = await fetch(url);
            const jsonData = await response.json();
            setData(jsonData);
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };

    useEffect(() => {
        fetchData();

        const pollingId = setInterval(() => {
            fetchData();
        }, interval);

        return () => {
            clearInterval(pollingId);
        };
    }, [url, interval]);

    return data;
};

export default usePolling;
        

How to use this hook?

Now, let's see how we can use the usePolling hook in a React component.

import React from 'react';
import usePolling from './usePolling';

const PollingComponent = () => {
    const data = usePolling('https://api.example.com/data', 5000);

    return (
        <div>
            {data && <p>{JSON.stringify(data)}</p>}
        </div>
    );
};

export default PollingComponent;
        

This custom usePolling hook in React can now help to handle API polling logic. This hook can be reused across multiple components to fetch data at regular intervals efficiently.