Skip to main content
Engineering, Web

Supercharge the Way You Render Large Lists in React

21 December 2023 / Global
Featured image for Supercharge the Way You Render Large Lists in React
Image
Figure 1: Code snippet to render massive list
Image
Figure 2: Render tree illustration
Image
Figure 3: Lighthouse score of massive list
First contentful paint0.9 seconds
Largest contentful paint3.0 seconds
Total blocking time2.1 seconds
Total performance score43
Image
Figure 4: Lighthouse score with one extra div
First contentful paint1 second
Largest contentful paint3.3 seconds
Total blocking time3.3 seconds
Total performance score40
Image
Figure 5: Lighthouse score with infinite scroll 
First contentful paint1.0 seconds
Largest contentful paint2.5 seconds
Total blocking time160ms
Total performance score78
Image
Figure 6: Windowing technique illustration
Image
Figure 7: Lighthouse score of massive list with windowing
First contentful paint1.0 seconds
Largest contentful paint2.5 seconds
Total blocking time190ms
Total performance score76
Srijan Gulati

Srijan Gulati

Srijan Gulati is a Senior Software Developer and the Frontend lead for Uber’s Crash analytics (Apps, services, and in-app bug reporter). He is passionate about responsive and accessible UX, problem-solving, and VIM.

Karan Verma

Karan Verma

Karan Verma is a Senior Software Engineer and Frontend Developer specializing in data visualization at scale.

Posted by Srijan Gulati, Karan Verma