I have one API which return thousands of records. When I am rendering that on screen, UI starts lagging. So I thought to implement it using lazy loading.
I want to load more data as user scroll and remove elements from UI and render new elements as user is scrolling means I just want to render that data on UI which is needed but I am not able to find any good resource for lazy loading table data.
I have created one code sandbox for that.
https://codesandbox.io/s/gallant-nightingale-glvdp8
Can anyone please help with the same?
Thank you.
There're two ways that we can use in this situation :
1- React-Window library : https://react-window.vercel.app/#/examples/list/fixed-size
2- Create lazy loading behaviour from scratch, but this will need some changes in the backend, as we will divide the data into pages and send a page ( which will contain n records ) at a time, you can see how to implement it here : https://www.youtube.com/watch?v=NZKUirTtxcg