# legendapp/legend-list

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/legendapp-legend-list).**

2,953 stars · 100 forks · TypeScript · mit

## Links

- GitHub: https://github.com/LegendApp/legend-list
- Homepage: https://www.legendapp.com/open-source/list
- awesome-repositories: https://awesome-repositories.com/repository/legendapp-legend-list.md

## Description

Legend List is a high-performance list rendering library designed to display massive collections of data with varying item heights. It utilizes windowed virtualization and a measured-height cache to render only the visible portion of a list, preventing lag and maintaining a smooth frame rate.

The library specializes in bidirectional infinite scrolling and stable scroll anchoring, which prevents visual jumps when content is prepended to the top of a list. It includes specific alignment capabilities to keep content pinned to the bottom, supporting the layout requirements of chat interfaces.

To reduce memory overhead and rendering costs, the system employs component recycling to reuse a small pool of instances as items scroll into the viewport. It further decouples the data source from the view layer through asynchronous rendering to prevent main thread blocking.

## Tags

### User Interface & Experience

- [Virtualized List Rendering](https://awesome-repositories.com/f/user-interface-experience/virtualized-list-rendering.md) — Uses windowed virtualization to render only the visible portion of a list based on measured item heights.
- [Bottom-Anchored Lists](https://awesome-repositories.com/f/user-interface-experience/bottom-anchored-lists.md) — Includes list components anchored to the bottom to keep the most recent items visible during active updates.
- [Component Recycling](https://awesome-repositories.com/f/user-interface-experience/data-display-components/list-components/component-recycling.md) — Reuses single component instances for multiple list items to significantly reduce rendering overhead and memory usage. ([source](https://cdn.jsdelivr.net/gh/legendapp/legend-list@main/README.md))
- [Cell Height Caching](https://awesome-repositories.com/f/user-interface-experience/grid-cell-configurations/cell-access-optimizers/cell-height-caching.md) — Caches the actual pixel height of rendered elements to calculate the total scrollable area without rendering every item.
- [Infinite Scroll Components](https://awesome-repositories.com/f/user-interface-experience/infinite-scroll-components.md) — Ships components for bidirectional infinite scrolling that load data in both directions without visual jumps. ([source](https://cdn.jsdelivr.net/gh/legendapp/legend-list@main/README.md))
- [Infinite Scrolling](https://awesome-repositories.com/f/user-interface-experience/infinite-scrolling.md) — Implements bidirectional infinite scrolling to load and render content continuously in both directions.
- [Prepend-Stable Scroll Maintainers](https://awesome-repositories.com/f/user-interface-experience/stable-list-rendering/prepend-stable-scroll-maintainers.md) — Provides scroll anchoring that prevents visual jumps when new items are prepended to the top of a list.
- [Generic View Recycling](https://awesome-repositories.com/f/user-interface-experience/view-recycling-systems/generic-view-recycling.md) — Employs component recycling to reuse a small pool of instances, reducing memory overhead and rendering costs.
- [Chat Interface Layouts](https://awesome-repositories.com/f/user-interface-experience/chat-interface-layouts.md) — Supports chat interface requirements by maintaining pinned bottom scroll positions and stable layouts as messages arrive.
- [High-Performance Rendering](https://awesome-repositories.com/f/user-interface-experience/high-performance-rendering.md) — Implements high-performance rendering to efficiently display massive lists with varying item heights. ([source](https://cdn.jsdelivr.net/gh/legendapp/legend-list@main/README.md))
- [Asynchronous Rendering](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/list-rendering/asynchronous-rendering.md) — Implements asynchronous rendering to decouple data sources from the view layer, preventing main thread blocking during massive updates.

### Software Engineering & Architecture

- [Large Dataset Optimizations](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations.md) — Optimizes the rendering of massive collections of data to prevent lag and maintain a smooth frame rate.
- [List Virtualization](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations/list-virtualization.md) — Optimizes list virtualization by recycling components to reduce memory overhead for varying item heights.