Let's Build a VIRTUALIZED LIST from Scratch in React.js

A beginner friendly deep-dive into building a virtualized-lists from scratch and the algorithm behind them.
#reactjs #virtualization #frontenddevelopment
Code: github.com/rajeshdavidbabu/vi...
Further learnings: dev.to/adamklein/build-your-o...
React-Virtuoso: virtuoso.dev/
Gitposter-app: www.gitposter.dev
✨ My Links -
Discord: / discord
X.com: / rajeshdavidbabu
Want a shoutout?? : www.passionfroot.me/rajesh-babu
Github: github.com/rajeshdavidbabu
Timecodes:
0:00 - Intro
00:53 - Chapters
01:30 - Problems with really long-lists
03:13 - Virtualised List Architecture
05:21 - Building a virtualised list
08:23 - Optimising the algorithm
10:40 - My Verdict

[@Mi2ey]

Excellent video. Would definitely love to see another one that touches upon how introducing dynamic heights impacts this solution. My only suggestion is for more advanced topics it would be great to hear your thought process in analyzing the problems to solve and how you navigate to a solution. But I really enjoyed this video.

[@s.hariharanreddy5439]

thanks a lot man, you are a gem!!

[@Malhama-kt2gv]

I was searching for this video for a while , glad I found this video today
Kindly cover more react and ai for web engineer stuff

[@awekeningbro1207]

this was great deduction. I'd love to see the implementation for dynamic heights!

[@raj_talks_tech]

Dynamic heights can be implemented easy but the performance part is a huge challenge

[@NeelanshMathur]

This is good, thanks!

[@swastikpatro6436]

Good stuff ❤

[@prawarmundra4931]

how would we handle if itemheight is different for list elements

[@cantseeme101]

Hey man, can you please explain how the the translateY optimization works? I did not understand it.

[@raj_talks_tech]

Basically there are two possible optimizations here:
1) Instead of applying position absolute to all the list-items seperately, you only apply translateY to the parent block.
2) translateY uses GPU acceleration if available

[@erikrobinson9999]

How would I go about replacing the generated array with my own? I have a string array that I’m trying to virtualize

[@raj_talks_tech]

I think if you use React-virtuoso you can render your own component instead of string

[@aespidol]

What's the wallpaper on the screen behind you?

[@raj_talks_tech]

youtube videos for "cafe music"

[@dashorts6597]

Let's just use a library for now

[@techdiyer5290]

I'm so sorry, but I stumbled upon this video and only understood rendering and algorithms. I just looked up that react is a JavaScript library for front end development for ui type stuff. I don't even know why this was in my watch list.

[@raj_talks_tech]

Oh sorry might be wrong tag will remove it ! 😅