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.

[@nikhilarya7712]

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

[@Ray-ko6cw]

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

[@bsw4245]

absolute goldmine

[@abhinavkumarsingh_0365]

Was looking for exactly this

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

[@trejohnson7677]

@@andy_lamaxthe reality is building and maintaining a virtualization solution would eat up a majority of your career. you can mine for gold or be a jeweler. choose.

[@incarnateTheGreat]

Very cool. Thanks for sharing!

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

[@harag9]

Great video, thanks for that.

[@PoojaGera-l2r]

thankyou so much for this video!

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

[@mohamedsalimbensalem6118]

thanks for the video ^^

[@mocastello9253]

great video! thank you so much!

[@geforcesong]

what if the user component has dynamic height, it could be different height in different cases, does Virtuoso handle 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!

[@ayushkarki1880]

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.

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

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

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

[@moghariyarahul5723]

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

[@Lyric-w1r]

do you use vim ou vscode?

[@cosdensolutions]

Vscode with vim bindings

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

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

[@VidoviDroga]

Is it ok to use this with nextjs 14?

[@FaintArt]

observer api? pagination?

[@iamTLC]

any reason not to use tanstack virtual?

[@cosdensolutions]

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

[@AkoMawlood]

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* 😄