Jay Meistrich
@jmeistrich • 5,952 subscribers
@LegendAppHQ @bravely_io @margelo_com. Been a digital nomad for 14 years. Talk to me about Legend State, Legend List, web perf, productivity, and traveling.
Shorts
Legend List 3.0 is here! 🎉 ✨ React DOM support ✨ Even faster, more stable ✨ Perfect initial scroll ✨ KeyboardAwareLegendList for chat and AI apps ✨ Reanimated item transitions ✨ So much more! It’s been almost 1,000 commits since v2, super excited to finally release it!
44,529 görüntüleme
For so many years I've wanted a Spotify app with a small window, good hotkeys, low resource usage, and that's just quick to navigate around. So I finally decided to build it. I've been using it myself and I'm very pleased with it ✌️ It's still in progress but very promising!
70,025 görüntüleme
I think I found a way to make a React Native list component with significantly better performance than FlashList, with 100% javascript. I'm still testing it but as far as I can tell there’s no pitfalls or issues… It just requires the new architecture for synchronous onLayout.
95,338 görüntüleme
Legend List 1.0 beta is ready! It started as a performance experiment, but it ended up solving a lot of the major issues with lists in React Native. 🎉 ✨ Better perf than FlashList ✨ maintainContentVisiblePosition ✨ Bidirectional infinite lists ✨ Chat UI without inverting
57,401 görüntüleme
Legend List 2.0 is now in beta! ✨ Improved performance ✨ Perfectly accurate scrollToIndex ✨ Mount time on new arch goes from pretty fast to ZERO ✨ Sticky headers ✨ estimatedItemSize is now optional ✨ Fixes many bugs
37,207 görüntüleme
Legend List 2.0 is LIVE! The ⚡️ fastest React Native list library, in 100% JS, now with more accuracy and speed! ✨Perfectly accurate scrollToIndex ✨Even faster ✨Zero mount time on new arch ✨Sticky headers ✨estimatedItemSize is optional ✨New and old arch
24,952 görüntüleme
I made a mistake in the LegendList comparison which made FlashList look worse than it is 🤦. But another mistake made LegendList look worse than it is too 😂. And I did another round of optimizing today, so it's still looking pretty good!
27,049 görüntüleme
The first video is when scrolling at 1.3x, way faster than is reasonable. This video is at 1.0x. The latest optimizations are not quite stable yet, will release them this weekend!
25,929 görüntüleme
Experimenting with Legend List in the other app, which uses FlatList and performs surprisingly well already. I only really see it get slow after loading a lot of pages and then scrolling very quickly. I learned a lot from this! - Recycling looks great! I’m actually surprised it’s so much faster! And it doesn’t seem to do anything weird to the state in posts. - FlatList is pre-rendering 9 pages worth of posts so it scrolls smoothly through those, then it falls apart and blanks. Watching its behavior in the dev tools gave me some ideas to pre-render more intelligently. - Legend List seems slightly better than FlatList without recycling, but I think we can still get it to *much* better. When scrolling quickly through expensive list items, by the time they finish rendering they’re already off screen. So I think the best solution is to try to do better at predicting what *will* be on screen when scrolling quickly. - FlatList always keeps the first 4 items rendered at the top, so scrolling to the top looks great. We could consider doing that? Or maybe the prediction algorithm could have a special case for when it looks like a scroll to top. - The big difference in perf is that FlatList renders an array of all items in view, while Legend List renders absolutely positioned containers. So when adding an item, FL re-renders the whole array and LL updates one container. And with static positioning in FL a size change triggers a layout in the ScrollView, while with absolute positioning in LL it just updates a few style props on containers. - Legend List is not quite ready to drop in. Some event handlers (onScroll, onEndReached) appear to behave differently so I need to debug and fix those first, and will do more testing in Bluesky to find any other bugs. - It’s looking promising! 🎉
23,667 görüntüleme