Can React.js Render 1,000,000 Elements?

preview_player
Показать описание
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

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Introduction to GraphQL with Apollo and React

Made with 💗 by Coderone
Рекомендации по теме
Комментарии
Автор

Wow. I thought for sure you couldn't hit 1M. Nice stuff!

maxteer
Автор

Wow, didn't know that before, thanks dude

yc-codes
Автор

Great and informative video, thanks! Really appreciate it

PrevalentAA
Автор

I think you can create multiple columns and see how many components fit that way.

rinatvaliullov
Автор

Can we put like a "waiting/loading screen" instead of the blank flickering in the library or would we have to implement it ourselves?

nullbeyondo
Автор

That browser limitation of max scollHeight

mahdiwebdevelopment
Автор

nice explanation, i'm just wondering how it's work and your explanation really nail my brain

raihan
Автор

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?

rickcode
Автор

May I ask which vscode theme you are currently using?

dat
Автор

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?

hetnon
Автор

This doesn't affect server rendered components right?

boomshakalaka
Автор

So it's basically like intersection observer under the hood, yes?

damilareemichaell
Автор

1:53 Why localhost should render pretty fast?

ozzrjug
Автор

Please make a video on how to convert react web app to android apk easiest way💯😏

mahdiwebdevelopment
Автор

It reminds me recycler view of anroid.

zerodegreecoder