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.

Improve this question

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Isn't the second option just pagination of the data?
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
Hey @MohamedAshraf, Thanks for the answer. I think React-window can help. Let me check it.
@MohamedAshraf, I am facing issue with react-window. Can you please check it once? stackoverflow.com/questions/74169155/…
Hey @Kelly, I added an answer it should help.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.