Question 35425 in React native Question posted in
The official React Native documentation can be found here.

Fetch large amount of data from API in React Native

I recently started to get play around with React Native a little bit. One of the questions that came to my mind was how to properly fetch large amounts of data from an API. I have a MySQL database with around 200k entries which I want to display in a list in the React Native application.

Fetching 200k entries at one shot probably is not the most efficient way to accomplish this. I thought of using the scroll index of my list and steadily fetch a smaller range of items (maybe about 20 or 30) while scrolling down. However, I don’t think that is the best way to solve my problem. How have you solved this and what are your suggestions for handling larger amounts of data in React Native?

Thank you for your help in advance!

Tags:

2

Answers


  1. 0

    200k entries is a wild amount to be retrieving all at once. Do you really need them at the same time? I’d suggest creating several endpoints that could be used to surgically retrieve the data you need to see at any given moment. After that, there would be 2 options for how to solve this.

    1. Paginate the results. So you’ll send like x results at a time (something small like 100). In your API get request you’ll state the page number as a parameter. Then as you scroll down the list, you’ll increment that page number parameter. And as you receive more data, you concatenate it with the data you’re using in the list.

    2. This solution is a bit more complicated, but you could passively retrieve the data in the background. I’ve done this before for apps that required offline-mode. So you’d have a cached set of data, and then overtime you gradually update it. Slowly, so as not to overwhelm the client. (The first time the user fetches the data it’ll be slow to load too). Check out https://www.npmjs.com/package/swr.

    3. You could do both 1 and 2 combined if you really want to be a superstar.

    In addition, if you’re planning on having a MASSIVE list to scroll – don’t use FlatList. I know people will recommend it to you – but don’t do it. FlatList is a great component, and works very smoothly for large lists, but it fails on massive lists. You’ll want to try out RecyclerListView (https://www.npmjs.com/package/recyclerlistview) or I’ve heard that FlashList is great too (https://shopify.github.io/flash-list/)

    Login or Signup to reply.
  2. 0

    React Native has a built-in component called a FlatList that will do much of this work for you. You can choose how many items to load at one time, how far in advance to load the next group of items, and more.

    https://reactnative.dev/docs/flatlist

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search