Should I fetch all data at once and save it in the state?

Question

I am currently implementing pagination for a list of users(just an example). One approach is to fetch users by page. This means that I pass something to the API so that it would return a set of users that corresponds to the current page. Another approach is to fetch all users, save it in the state, and do all the computation(number of pages, etc) in React.

In the next days, I am planning to implement polling(I am new to this, btw) so the data is always up to date whenever there is a change in the database records.

I would like to ask your opinion as to which method should I go? I am not sure which is better combined with polling as I am relatively new to it. I am concerned that if I fetch all users then do polling, it might consume a lot of memory and cause the browser to crash.

Answer 1

I think, You can try this way, fetch users according to pagination and as soon as you receive data, you can attach/replace in the existing array

Answer 2

It would be better to fetch users by page as that will cause minimum data to be transferred between server and client. You can fetch data as and when required. When the first page is loaded you can save that to state and when the second page is loaded you can append that to the state (so that you don't have to fetch the entire data again). It does not make sense to get all the data upfront since it will cause you increased load times (especially since you talked about immense amount of data that can cause the browser to crash). If you have that much amount of data you can replace the state with new data also.

Answer 3

Fetching all data at once and then performing pagination in front-end is not the recommended solution because you are fetching all the data from DB unnecessarily. Data should be fetched on-demand when the user requests for it.

To improve performance one thing you can do is to fetch data for the current page and the next/previous one and keep it in the state. Once user decides to go to page 3 onward, then make an API call to get that data.