How to handle large sets of data response from an api fetch when no size/limit/count parameters are present for the api?

Question

I am a beginner in React.js. My task requires me to fetch data from an API. Apparently, it does have any size/limit/code parameters. The response has near 3000 records which makes the website slow. Is there any workaround for this? I am confused on how to implement pagination when such a situation exists?

Answer 1

The performance gain will totally depend on the size and speed of the API. If each record has 20 properties or even other nested records, this will slow down the Request and take longer for the browser to parse the Response JSON.

In your React application, you can virtually paginate the results. This will speed up the render time of your application after you received the results.

There are multiple ways to achieve this and it also depends on how you want users to interact between each page. For example, you can have a page control element or implement an infinite scroll method.

To split up the data in chunks, I assume that we're dealing with an Array of records, you can use this example:

const response = await fetch('https://yourapi.com/whole-lotta-records');
const data = await response.json();

const pageSize = 25;
const page = 1;
const pages = Math.ceil(data.length / pageSize);

const pageData = data.slice((page * pageSize) - pageSize, page * pageSize);

// pageData contains 25 items