React - Best pagination pattern?

JavaScript
1

Hey everyone, I am going back and forth on the best ways to paginate in React. I am considering accessing the API data in a context provider, and then accessing that data with a limit and an offset and throwing that in the state (first 50 or so out of 500 results). Is it okay to have an API call for the next 50 every ‘Next’ or ‘Prev’ click, or would it be best to grab the first 50, throw that in state, and then for every subsequent click, I store the next fifty on top of what is already in the state so it is “cached”?

Thank you!

2

Hi @rstorms,

Both options can be implemented, and both of them are fine.

The first one(fetch, cache, add on top) is more suitable when server data doesn’t frequently change. So you won’t end up with stale data in your store/cache.

I would implement the second approach if the data has frequent updates on the server (no need to cache).

Try to check this tool: https://react-query.tanstack.com/guides/paginated-queries . It might help you.

1 Like