1

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.

Kelly
  • 131
  • 7

1 Answers1

1

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

Mohamed Ashraf
  • 74
  • 5
  • 1
    Isn't the second option just pagination of the data? – annes Oct 22 '22 at 13:48
  • Yes the same way of sending n articles to blog per page, but the difference we will make it like infinite scrolling (until we reach end of our data) , so it's like a small trick that will help – Mohamed Ashraf Oct 22 '22 at 13:52
  • Hey @MohamedAshraf, Thanks for the answer. I think React-window can help. Let me check it. – Kelly Oct 23 '22 at 04:19
  • @MohamedAshraf, I am facing issue with react-window. Can you please check it once? https://stackoverflow.com/questions/74169155/react-window-calling-renderrow-function-infinitely – Kelly Oct 23 '22 at 06:42
  • Hey @Kelly, I added an answer it should help. – Mohamed Ashraf Oct 23 '22 at 17:43
  • Thanks @MohamedAshraf, But I never thought that style tag can cause such issue. – Kelly Oct 23 '22 at 18:04
  • Anytime, ya me too when I used it for the first time, but it seems to be the problem, if you can mark it as an accepted answer it will be great. – Mohamed Ashraf Oct 23 '22 at 18:37