Preact Virtual List
A Preact component that renders only visible rows from large datasets, supporting millions of items.
What is Preact Virtual List?
preact-virtual-list is a Preact component that implements virtual scrolling to efficiently display large lists by only rendering rows currently visible in the viewport. It solves the performance problem of rendering thousands or millions of DOM elements simultaneously, enabling smooth scrolling and interaction with massive datasets.
Preact developers building data-intensive applications that need to display large lists or tables without performance degradation, particularly those working with business applications showing extensive datasets.
Developers choose preact-virtual-list for its focused implementation, excellent performance with million-row datasets, and simple API that requires minimal configuration compared to more complex virtual scrolling solutions.
Overview
:card_index: Virtual List that only renders visible items. Supports millions of rows.
Use Cases
Best For
- Displaying large datasets in Preact applications without performance issues
- Building business applications that need to show thousands or millions of rows
- Implementing virtual scrolling in Preact with minimal configuration
- Optimizing list rendering performance in data-intensive Preact apps
- Creating smooth-scrolling interfaces with massive item collections
- Reducing DOM node count and memory usage in list-heavy applications
Not Ideal For
- Applications with dynamically sized list items requiring variable row heights
- Projects built on React or other frameworks instead of Preact
- Teams needing out-of-the-box list features like sorting, filtering, or pagination
Pros & Cons
Pros
Only renders visible rows, dramatically reducing DOM nodes and memory usage, as demonstrated in the demo handling million-row datasets with smooth scrolling.
Renders extra rows above and below the viewport to minimize DOM interactions during scrolling, improving performance as shown in the GIF comparisons in the README.
Requires only data, renderRow, and rowHeight props to get started, making it easy to integrate with minimal configuration, as highlighted in the usage examples.
Offers a sync prop to eliminate flickering by forcing synchronous updates, though the README warns this comes at the expense of framerate, allowing developers to choose based on their needs.
Cons
Requires a fixed rowHeight prop, making it unsuitable for lists with items of varying heights, which is a common need in complex UIs.
Specifically designed for Preact, so it cannot be used with React or other UI frameworks without significant workarounds, limiting its ecosystem reach.
Focuses solely on rendering; lacks advanced functionalities like sorting, filtering, or infinite scrolling, requiring additional implementation effort from developers.
Frequently Asked Questions
Related Projects
Preact CompatATTENTION: The React compatibility layer for Preact has moved to the main preact repo.
Preact Render To String📄 Universal rendering for Preact: render JSX and Preact components to HTML.
Preact Material Componentspreact wrapper for "Material Components for the web"
Preact Markup:zap: Render HTML5 as VDOM, with Components as Custom Elements!
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.