2 min read
Rendering large lists in React: A headless solution
There are situations where having all the data preloaded is necessary and lazy loading or pagination is not applicable. In such cases, the need arises to explore solutions that virtualize items and render only what's visible to the user. Let's delve into the available solutions for this scenario.
Libraries I tried
When we search for “react large lists” on the first page of Google results, we mostly encounter information about react-virualized and react-window designed for handling large lists. However, my experiences with these libraries have often ended in failure for various reasons.
Unfortunately, I couldn’t comprehend why these libraries weren’t successful in addressing my needs.
I was instead seeking a headless solution that could seamlessly integrate into my code without the need for excessive wrapping and complex structural control.
TanStack Virtual
I am a fan of Tanner Linsley’s software and truly admire his work. Eventually, I stumbled upon one of his library react-virtual, created a quick prototype, and to my delight, it functioned seamlessly. With just a few lines of code, I had a virtualized list up and running.
Why another library?
React Virtual’s most distinguishing feature is that it’s just one single custom hook instead of a set of components. In more trendy terms, this means that it is “headless”, allowing you to control 100% all of the markup and styles, exactly how you want.
React Virtual supplies you with primitive utilities that allow you to build any range of virtualized experiences. One testament to this is that you can combine 2 instances of
useVirtualizeronto the same markup to achieve a virtualized grid, where with other utilites, you would need to use a dedicated Grid-like component.
Working example
Here, we have a demo involving a resizable parent container and rows with different heights.
