Company
Date Published
Author
Reno Bowen & Sam Crank
Word count
1060
Language
English
Hacker News points
None

Summary

Hex, a data analysis application, was experiencing performance issues due to rapid growth and the complexity of its features. The company turned to virtualization to optimize performance, leveraging React Virtuoso for efficiently rendering large lists. However, this approach proved challenging with nested content, where scrolling was jittery. To address this issue, Hex developed a custom-built VirtualizedElement component that renders only visible elements, using react-intersection-observer to control mounting and unmounting of cells based on their proximity to the viewport. This solution resulted in significant performance improvements across the board, including reduced initial render time, interaction lag, page load, render lag, and memory usage. The custom-built VirtualizedElement component is now a great fit for Hex notebooks, offering direct performance wins and deepened understanding of product needs.