[Django]-How to display large list of data using reactJS as frontend and django rest framework as backend

3000 records is a lot to send down to the client in one chunk. It is easier to develop against, but it doesn’t scale well and is likely to create a measurable load time. If you’re OK with that, and you don’t expect your data set to grow, then perhaps the pragmatic approach is to keep it as a big list… but it goes against best practices.

Either way, you likely don’t want to show a giant 3k-row list to the user, so the UI will have some sort of pagination mechanism. That might be “next”, “previous” pages, or it might be infinite scrolling. Either way, the data abstraction should be considering it as paged data.

Paging API
Assuming you decide to make your API support paging, you should use the backend framework’s paging capabilities, like the Django Paging API or some other abstraction for your REST API. There are lots of resources out there.

Search
The moment you decide to paginate the API, you are committing to handling search (filtering) on the backend as well. The only way you can manage client-side filtering is if the client has access to all the data. Since that isn’t the case, you’ll need to include a search filter in your data request. Searching and pagination aren’t mutually exclusive, so make sure your API supports both at the same time. A common way to handle this would be like this:

http://yoursite.com/api/ingredients?page=5&page_size=100&search=carrot

Client
On the React side, you can build your own UI (it is easy to do), or you can use a component which abstracts this for you, like react-js-pagination or react-paginate. The client component shouldn’t really care if the API is paged or not. Instead, it just notifies you when to display different records and the rest is up to you.

If you decide to keep everything in one big REST call, then you still need to slice the data out of your array to display. If you paginate your API, then you can keep an instance cache on the client side of the pages you’ve received. If you don’t have the data, make the REST call to get it, and populate an array with the data. That way, if a user goes forwards and then backwards, you aren’t re-fetching.

Conclusion
I hope this helps a bit. Enjoy