Efficiently Render 100,000 Rows in React

🚀 Project React → cosden.solutions/project-react
Repo → github.com/cosdensolutions/co...
Join The Discord! → discord.cosden.solutions
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.

[@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.

[@zerdnelemo]

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

[@harag9]

Great video, thanks for that.

[@incarnateTheGreat]

Very cool. Thanks for sharing!

[@abhinavkumarsingh_0365]

Was looking for exactly this

[@mocastello9253]

great video! thank you so much!

[@mohamedsalimbensalem6118]

thanks for the video ^^

[@bsw4245]

absolute goldmine

[@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.

[@ahmadbenchakhtir5787]

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.

[@matrioxplayz1607]

you probably could, however it would take a lot of effort and you would end up making what is essentially a library

[@ahmadbenchakhtir5787]

@@matrioxplayz1607 Agree Agree, on one side you're right. but this -Building ur own- will push your skills and your logical thinking add to this usually u will not need to all the functionality of the library. I don't say that the library approach is bad... It's a trade off with personal preference. Thank u.

[@shivamjainn]

​@@ahmadbenchakhtir5787 ofcourse it will push your skill , but reinventing the wheel is just pure insanity . You could read the code from library instead and also contribute. As for skills , i agree with you point. But doing this isn't helping u anyways so why try

[@andy_lamax]

It's not about reinventing the wheel, its about understanding how the library works. Just using a library and not knowing its internals tends to not put a boost on one's skillset

[@Presidentum]

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

[@cosdensolutions]

They are different things! This is a rendering optimization, RQ is a data fetching lib!

[@HenryBabbage]

I think OP is referring to Tanstack Virtual, which handles list virtualization. Also curious how these two libs compare@@cosdensolutions

[@geforcesong]

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

[@hassanad94]

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?

[@sarthakagarwal014]

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?

[@cosdensolutions]

It would work the same!

[@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?

[@cosdensolutions]

it all depends on how you want to do it. As long as you load paginated data and not all at once, you are good!

[@moghariyarahul5723]

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

[@VidoviDroga]

Is it ok to use this with nextjs 14?

[@codernelly34]

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

[@cslearn3044]

i think you should reconsider programming lmao if you dont know how to google or use chatgpt

[@immipixediter210]

u can use 'emittor' package npm i emittor

[@zerdnelemo]

Context is in-memory storage. When you refresh your page in the browser, everything is reset. If you want to persist data between refresh, you should store it somewhere, like local storage, per instance.

[@victormanuelalonsoramirez8358]

If You want to persit data you need to use localstorage

[@FaintArt]

observer api? pagination?

[@user-jm1qz4dj9l]

do you use vim ou vscode?

[@cosdensolutions]

Vscode with vim bindings

[@IAmTerryClark]

any reason not to use tanstack virtual?

[@cosdensolutions]

there's not just one way to do things ☺️

[@user-tq6kn5bv8h]

Like

[@ricohumme4328]

So how does this library compare to the Flatlist implementation?

[@cosdensolutions]

its very similar actually. FlatList implements virtualization as well

[@immipixediter210]

npm i emittor

[@nickwoodward819]

But *why* 😄