Optimizing React Performance with List Virtualization
When it comes to developing web pages, manipulating the DOM can be expensive. React aims to minimize interactions with the DOM, but rendering extensive lists of items can still be a challenge. This is where list virtualization, also known as windowing, comes in.
What is List Virtualization?
List virtualization is a technique that improves the performance of rendering long lists by only writing the visible portion of the list to the DOM. This works by having a small window element moving over a bigger container, rendering only the items currently visible to the user.
Do You Need Windowing?
While windowing can improve performance, it’s not a silver bullet. It delays writing the entire list to the DOM, but those items still need to be rendered eventually. In some cases, windowing can actually decrease perceived performance.
React-Window and React-Virtualized
Two popular libraries for list virtualization are react-window and react-virtualized. While they share similarities, they offer different levels of support and overhead.
React-Window
React-window is a lighter core with a simpler philosophy. It provides four main components:
- FixedSizeList
- VariableSizeList
- FixedSizeGrid
- VariableSizeGrid
React-window is ideal for tables, lists, and grids, but may not support more complex use cases like masonry layouts.
Dynamic Container Sizing with AutoSizer
To implement dynamic container sizing, you can use react-window’s FixedSizeList component with a resize listener.
Dynamic Item Sizing with CellMeasurer
For dynamic item sizing, you can use a custom React hook to simulate react-virtualized’s CellMeasurer.
Infinite Loading with InfiniteLoader
For infinite loading, you can use an external package like react-window-infinite-loader.
Arrow Key Navigation with ArrowKeyStepper
You can implement arrow key navigation using react-window’s FixedSizeList component and handling arrow events.
Scroll-Synced Multi Grids with MultiGrid + ScrollSync
To achieve scroll-synced multi grids, you can combine react-window’s FixedSizeList and FixedSizeGrid components.
React-Virtualized vs. React-Window
If react-window provides the functionality you need, it’s recommended to use it instead of react-virtualized. However, if you need features only react-virtualized provides, you can either use react-virtualized or create a custom component.
Conclusion
React-window offers newer and faster virtualized list primitives. Use react-window as your building block to satisfy your specific use case without unnecessary code. React-virtualized is a heavier all-in-one tool that solves many use cases, including virtualizing collections that are not grids.