Meistrich announces that Legend List v2 is stable and that React DOM support is in beta. Its core strategy is to recycle containers and rerender only the one receiving a new item, instead of rerendering and reconciling the whole list. He evaluates performance by watching frame rates and scrolling on a deliberately slow phone.
Legend List: Optimizing for Mobile & Web
Speaker
Jay Meistrich, creator of Legend List, presents its React Native and web performance work at React Universe Conf 2025, hosted by Callstack.
Version 2 fixes maintain visible content position, or MVCP, so items in view stay put when content above them changes size. Meistrich says the new algorithm responds instantly without disrupting scroll momentum and removes many earlier workarounds. It also makes scroll-to-index accurate despite estimated item sizes and simplifies adding sticky indices.
Meistrich compares list layouts used by Virtuoso, TanStack Virtual, and Virtua, describing tradeoffs in layout work and GPU compositing. Legend List absolutely positions and recycles containers, then moves DOM elements into the correct order for selection and accessibility. A minimal-mutation reordering algorithm handles that DOM order, while the items’ positions remain visually unchanged.
For web MVCP, Legend List uses `scrollBy` to adjust scrolling, though Meistrich says this does not work on mobile Safari yet. Synchronous browser measurements let the web version follow much of the same path as React Native’s new architecture. Meistrich invites users to try v2 and the web beta, report problems, and contribute fixes.
Takeaways
- Recycle list containers and rerender only the item that changes to reduce React and browser work.
- Test scrolling on slow devices and watch both frame rate and how the interaction feels.
- Stable visible positioning can support reliable scroll-to-index behavior and simplify other list features.
- For web lists, account for DOM order because visual ordering alone does not preserve selection or accessibility.
- Treat platform-specific gaps such as mobile Safari scrolling as explicit optimization work.
Mentioned in this talk
Search inside this talk
What was claimed 11
- builtLegend List built Jay Meistrich
“I'm going to talk to you today about Legend List”
YouTube Unverified1 source· Talk
- featureLegend List: Version 2 is stable and released on npm
“Legend List version 2 is now stable and released on npm today.”
YouTube Unverified1 source· Talk
- featureLegend List: Web support is available in beta for React Native Web and React DOM
“web support is now released in beta”
YouTube Unverified1 source· Talk
- featureLegend List: Recycles containers and rerenders only the container whose item changes
“It just rerenders the one container that changed.”
YouTube Unverified1 source· Talk
- featureLegend List: MVCP keeps visible items from moving when content above the viewport changes
“when items change above the viewport, the items you're looking at in the viewport don't move”
YouTube Unverified1 source· Talk
- featureLegend List: Scrolling to a dynamically sized item index is accurate
“it's perfectly accurate every time”
YouTube Unverified1 source· Talk
- featureLegend List: Supports sticky indices
“It also made it easy to add sticky indices”
YouTube Unverified1 source· Talk
- featureLegend List: Web implementation reorders DOM elements to preserve document order
“It made an optimal reordering algorithm that does the smallest number of DOM mutations”
YouTube Unverified1 source· Talk
- featureLegend List: Web MVCP uses scrollBy; this does not work on mobile Safari
“on mobile Safari, where it doesn't work”
YouTube Unverified1 source· Talk
- featureLegend State: React state library with a local-first sync engine
“It's also a full local-first sync engine”
YouTube Unverified1 source· Talk
- builtLegend State built Jay Meistrich
“I also make Legend State”
YouTube Unverified1 source· Talk
