ReactJS: Best practice on fetching/listing

Hi all,
I just started on React and Web Development.

I am developing a reusable component which is a popup list that will fetch data from the server and retrieve it so the user can choose one option (imagine a popup to choose a supplier from a list).

For now, I fetch the data from the server, load it in an array and pass it via props and it works fine. But I am worried with data volume.
If the amount of data is small there will be no problem.

But what if there is a big amount of data?
Should I load the array with that big amount with no worries?
Should I be fetching data in smaller pieces? If so, how should I do it?

What do you think it is a best practice here?

Thank you in advance!

You need to define what you think is big, and the context. Eg if there are thousands of entries but each entry is just a short string, no problem, if there are ten entries but each one is an enormous object maybe there’ll be an issue.

You need to check if there is an issue: run the app in production mode and give the component an increasingly large array, see if/when there’s an issue. Otherwise you’re just guessing and working blind.

1 Like

Yeah, I guess you’re right.
In this case, it will be an array of small objects (i.e., objects with just a few properties, maybe 10 tops).

But sure, experimenting is the final test! thanks!

That’s a very small amount, it’ll be fine.