Efficiently Render 100,000 Rows in React

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

In this video I will show you how to efficiently render 100,000 rows in React. We are going to be doing this with the react-virtuoso library, which applies the concept of virtualization to React. Virtualization means only rendering a subset of elements instead of all of them. In our case, we will only render the elements currently visible in the viewport. This will allow us to efficiently render 100,000 rows in React.

[zerdnelemo]

I used react-window in the past. Virtuoso is really a big improvement.

[ivandamyanov]

Thanks for the video I'm happy to know about this package for my future use cases and I think you explained all the basics a beginner might need, in an easy to understand manner.

[nikhilarya]

Good quality content, loved the explanation with example, thanks.

[Ray-kocw]

Thank you so much, I've been looking for this

[ahmadbenchakhtir]

First Thank u, second actually I wish that we could do it without any library... sometimes i hate the idea that most of the things we use a library for.

[kevyyar]

Hello Cosden! I've been eagerly following your React course updates, and I must say, it’s precisely what I've been looking for to advance my skills. I am currently on the job hunt, either in Argentina or remotely. Unfortunately, my current financial situation doesn't allow me to enroll in your course at its full price. I am deeply committed to learning and growing in this field, and I wonder if there might be any scholarships, discounts, or alternative options available that could assist me in accessing this invaluable resource? Thank you for understanding my brother.

[geforcesong]

what if the user component has dynamic height, it could be different height in different cases, does Virtuoso handle this?

[Presidentum]

Very interesting video!!! It seems like an alternative to tanstack query, no? What are the pros and cons of it against TQ?

[ayushkarki]

Thanks for the video. Is there any way to configure when fetchNextPage is called. I have a scenario where the rows loaded doesn't occupy the container height in first three set's of data. This lead to not calling endReached callback even after there is next set of data.

[hassanad]

I have a question. Currently you set a fixed hight, what if dont want fix height. What if i want to set 100%?

So that i can use anywhere.

(I dont want to set it as a prop)

Pls can you help?

[darkshadowgks]

normally with the table, people will have to able to search on it, can this do so? can you show to us how search (example search particular name) works on this?

[sounakmandal]

In a large table, generally we have pagination in the table itself where we anyways display a single page of fixed size and fetch the next page when the user manually moves to the next page. In this case, is there any advantage to this approach?

[sarthakagarwal]

Thanks for the video, but here one question arises is that what if we have that large amount of image along with text. Will it work or do we need to choose other way?

[codernelly]

Please Sir am just from watching your video on react Context api but i have a problem i have created a context api where the context value is set in the login page and the value is displayed in the home page it works fine but when the home page is refresh the value of the context became undefined why please help am a beginner

[moghariyarahul]

Hey bro, i am building a chat app and it has aa lot of dynamic content so how can i use it?

[iamTLC]

any reason not to use tanstack virtual?

[ricohumme]

So how does this library compare to the Flatlist implementation?