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

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

[@vishaldas1665]

Awesome explanation!, I am a backend dev and I got it thanks a lot.

[@NeelanshMathur]

This is good, thanks!

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

[@HideBuz]

Awesome content, that's quality teaching! Instant sub

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

[@PoojaGera-l2r]

love how there was math involved haha, looking forward to more content from you!

[@s.hariharanreddy5439]

thanks a lot man, you are a gem!!

[@SeeingHumanBoxes]

Hi. I created an infinity grid with dynamic width about 2 years ago, similar to the one you showed in your video. However, I couldn't solve one issue: fast scrolling. If you have 50k to 1M elements and render all of them, scrolling quickly from top to bottom causes layout shifts and FPS drops. I tried using debouncing and rendering delays, but it's not easy to implement. I rendered cards - picture + text. Can you give me some advice?

[@RoBBiEoftheAether]

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

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

[@swastikpatro6436]

Good stuff ❤

[@prawarmundra4931]

how would we handle if itemheight is different for list elements

[@ampersandrue-24k]

What's the wallpaper on the screen behind you?

[@raj_talks_tech]

youtube videos for "cafe music"

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

[@omkarbandal6606]

Can we overcome this with pagination?

[@raj_talks_tech]

if you have an url based pagination with page numbers, but if you have deep list then u need it

[@saqomelqon1618]

Not tan-stack? Surprised it’s not one of the recommendations

[@dashorts6597]

Let's just use a library for now