Can React.js Render 1,000,000 Elements?
Вставка
- Опубліковано 27 чер 2024
- Let's experiment with Reactjs and see how we can make React capable of rendering 1 million rows at the same time using virtualization.
⭐ Timestamps ⭐
00:00 Intro
00:17 Can React alone render 1 million rows?
03:54 React virtualization
05:14 How does virtualization work?
06:30 Using the power of virtualization
10:08 Browser limitation
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone
Wow. I thought for sure you couldn't hit 1M. Nice stuff!
Wow, didn't know that before, thanks dude
Great and informative video, thanks! Really appreciate it
I think you can create multiple columns and see how many components fit that way.
That browser limitation of max scollHeight
Can we put like a "waiting/loading screen" instead of the blank flickering in the library or would we have to implement it ourselves?
nice explanation, i'm just wondering how it's work and your explanation really nail my brain
This generates an extra scroll in the page, one for the main page and another one for this window virtualized :( Is there any way that we can avoid that?
May I ask which vscode theme you are currently using?
I'm stuck on a problem that I'm trying to solve with the window virtualization but challenge is not just a list but a table. How to match a table header with a virtual list. Any idea?
This doesn't affect server rendered components right?
So it's basically like intersection observer under the hood, yes?
I guess so.
I think this actually calculates what to render based on scroll position, and fills in the top and bottom with a single empty div with variable height. 1 million intersection observers would cause performance issues during rapid scrolling
1:53 Why localhost should render pretty fast?
Because u dont do any request over the internet
@@apostol1966 Thank you!
oh man, slow news day
It reminds me recycler view of anroid.
Yeah. All approaches for mobile list views during early days of mobile phones almost always relies on some type of virtual scroll/recycler view and that's because the early mobile phones had very little RAM. So there was no way to fit entire contacts for example on ram for rendering as list. Recycler view allowed reading from disk every time list is scrolled and only saving a constant amount of visible rows on screen in the ram. I would say as well all list views with unbounded length should be made from this manner as sooner or later that list is gonna grow more than the ram or exceed reasonable rendering time.
@@bangonkali Thanks man
Please make a video on how to convert react web app to android apk easiest way💯😏