Efficiently Render 100,000 Rows in React

Рет қаралды 15,218

Күн бұрын

🚀 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.

Пікірлер: 44

@ivandamyanov 2 ай бұрын

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.

@Ray-ko6cw 3 күн бұрын

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

@zerdnelemo 2 ай бұрын

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

@harag9 2 ай бұрын

Great video, thanks for that.

@abhinavkumarsingh_0365 Ай бұрын

Was looking for exactly this

@incarnateTheGreat Ай бұрын

Very cool. Thanks for sharing!

@mocastello9253 Ай бұрын

great video! thank you so much!

@mohamedsalimbensalem6118 2 ай бұрын

thanks for the video ^^

@bsw4245 Ай бұрын

absolute goldmine

@kevyyar 2 ай бұрын

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 2 ай бұрын

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

@geforcesong Ай бұрын

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

@Presidentum 2 ай бұрын

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

@cosdensolutions 2 ай бұрын

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

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

@sarthakagarwal014 2 ай бұрын

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 2 ай бұрын

It would work the same!

@moghariyarahul5723 2 ай бұрын

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

@darkshadowgks 21 күн бұрын

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?

@codernelly34 2 ай бұрын

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 2 ай бұрын

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

@immipixediter210 2 ай бұрын

u can use 'emittor' package npm i emittor

@zerdnelemo 2 ай бұрын

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 2 ай бұрын

If You want to persit data you need to use localstorage