Rate limit the number of request made from react client to API

I wanted to limit the number of requests but also put them on hold until it is allowed by the API, so I though that the best option was to run them sequentially in a FIFO order, with a delay of 1 sec between them so I do not exceed the 60 requests in 1 minute requirement. I was also thinking about let them run some of them concurrently, but in this case the waiting time could be high once the limit is reached.

I created then 2 things:

A 'useDiscogsFetch' hook

• Will send all the API calls as promises to the queue instead of making them directly.
• It will also generate an UUID to identify the request to be able to cancel it if it's needed. For this I used the uuid npm package.

useDiscogsFetch.js

import { useEffect, useRef, useState } from 'react';
import DiscogsQueue from '@/utils/DiscogsQueue';
import { v4 as uuidv4 } from 'uuid';

const useDiscogsFetch = (url, fetcher) => {

    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    const requestId = useRef();

    const cancel = () => {
        DiscogsQueue.removeRequest(requestId.current);
    }

    useEffect(() => {
        requestId.current = uuidv4();
        const fetchData = async () => {
            try {
                const data = await DiscogsQueue.pushRequest(
                    async () => await fetcher(url),
                    requestId.current
                );
                setData(data)
            } catch (e) {
                setError(e);
            }
        };
        fetchData();
        return () => {
            cancel();
        };
    }, [url, fetcher]);

    return {
        data,
        loading: !data && !error,
        error,
        cancel,
    };

};

export default useDiscogsFetch;

A DiscogsQueue singleton class

• It will enqueue any received request into an Array.
• The requests will be processed one at a time with a timeout of 1 sec between them starting always with the oldest.
• It has also a remove method, that will search for an id and remove the request from the array.

DiscogsQueue.js

class DiscogsQueue {

    constructor() {
        this.queue = [];
        this.MAX_CALLS = 60;
        this.TIME_WINDOW = 1 * 60 * 1000; // min * seg * ms
        this.processing = false;
    }

    pushRequest = (promise, requestId) => {
        return new Promise((resolve, reject) => {
            // Add the promise to the queue.
            this.queue.push({
                requestId,
                promise,
                resolve,
                reject,
            });

            // If the queue is not being processed, we process it.
            if (!this.processing) {
                this.processing = true;
                setTimeout(() => {
                    this.processQueue();
                }, this.TIME_WINDOW / this.MAX_CALLS);
            }
        }
        );
    };

    processQueue = () => {
        const item = this.queue.shift();
        try {
            // Pull first item in the queue and run the request.
            const data = item.promise();
            item.resolve(data);
            if (this.queue.length > 0) {
                this.processing = true;
                setTimeout(() => {
                    this.processQueue();
                }, this.TIME_WINDOW / this.MAX_CALLS);
            } else {
                this.processing = false;
            }
        } catch (e) {
            item.reject(e);
        }
    };

    removeRequest = (requestId) => {
        // We delete the promise from the queue using the given id.
        this.queue.some((item, index) => {
            if (item.requestId === requestId) {
                this.queue.splice(index, 1);
                return true;
            }
        });
    }
}

const instance = new DiscogsQueue();
Object.freeze(DiscogsQueue);

export default instance;

I don't know if it's the best solution but it gets the job done.

You do not need a setTimout (so you don't need to cancel the setTimeout), and you do not need to cancel the fetch.

To use a value inside a React component, you have to use a React state. React would not know about changes to some outside object (like your singleton object).

You can store the timestamps of the last n requests, and if the first one is older than the time period, you can remove it and make a new request.

const useLimitedRequests = function(){
    const limit = 5;
    const timePeriod = 6 * 1000;
    const [ requests, setRequests ] = useState([]);

    return [
        requests,
        function(){
            const now = Date.now();

            if( requests.length > 0 && (requests[0] < now - timePeriod) ){
                setRequests( requests.slice(1) );
            }

            if( requests.length < limit ){
                setRequests([ ...requests, now ]);
                return now;
            }

            return 0;
        }
    ];
};

export const LimitedRequests = (props)=>{
    const [ requests, addRequest ] = useLimitedRequests();
    return (<>

        <button onClick={ ()=>{
            if( addRequest() > 0 ){
                console.log('ok, do fetch again');
            } else {
                console.log('no no, you have to wait');
            }
        }}>
            fetch again
        </button>

        { requests.map(function( req ){
            return <div key={ req }>{ req }</div>;
        })}
    </>);
};