Virtualization in React

@anshumanv

@anshumaniac

About me 

• Eng @Clarisights
• 💡 open-source and web performance
• 🥰 football and anime 

• Lists are everywhere 😱

Tradeoffs 🤔

• Accessibility concerns
• Not Searchable using Cmd/Ctrl + F
• Heavy list items can show jank

react-window/react-virtualized

Suggestions

• Precompute all data or in chunks if possible
• Keep cells as lite as possible
• Do no prematurely apply virtualization

Resources

• github.com/WICG/virtual-scroller
• web.dev/virtualize-long-lists-react-window/

Thanks!