How we beat browser bottlenecks

This post details the implementation of a custom 'VirtualizedElement' for Hex notebooks. It describes the limitations of using a list-based virtualization library like React Virtuoso for Hex's tree-like notebook structure and the decision to build a self-contained virtualized element. The implementation uses two react-intersection-observer instances with different margins to control mounting (within 500px) and unmounting (beyond 5000px) of cells, ensuring a stable scroll bar by replacing unmounted cells with placeholders of their actual height. This resulted in significant performance improvements: 90% reduction in initial render time, 33% reduction in interaction lag, 25% reduction in page load, 14% reduction in render lag, and 10% reduction in memory usage.