Legend List 0.1 is ready to test! This is an early experiment to see how well it works in real apps so please post issues and/or PRs 🙏. It’s only ~600 lines so it should be easy to understand and tweak. ✨ 100% JS ✨ Fast ✨ Dynamic sizing ✨ Works in both new and old arch - ThreadSky

jayz.us • 191 days ago

Legend List 0.1 is ready to test! This is an early experiment to see how well it works in real apps so please post issues and/or PRs 🙏. It’s only ~600 lines so it should be easy to understand and tweak.
✨ 100% JS
✨ Fast
✨ Dynamic sizing
✨ Works in both new and old arch

Comments

jayz.us•191 days ago

Install:
bun add @legendapp/list

Repo:
https://github.com/LegendApp/legend-list

Big thanks to @cedric.dev for helping with great ideas and being an @expo.dev wizard!

jayz.us•191 days ago

It surprisingly seems to work well in old arch too, and still seems faster than other lists 😀. Needs a lot more testing and benchmarking though...

There's still more optimizations to be done, but I'm very curious to see how it works for you!

tazsingh.com•191 days ago

On old arch? I thought you achieved perf via sync onLayout?

Have you played with it on Web at all? Happy to drop it into @guild.host & can pair on that too if you need a guinea pig 😄

jayz.us•191 days ago

Perf is more from legend state's targeted small renders 😃

I tested web only briefly. It seems to work at least, but not sure how perf compares to others. We may be able to do some web specific optimizations with things like ResizeObserver. I'd love to try it in guild!

tazsingh.com•191 days ago

I got annoyed with FlatList and am just using ScrollViews which has been fine for our largest lists (attendees)

We’re not pushing the boundaries of list rendering yet, so might be a decent use case to start with for Web support! I’ll try dropping it in some time

andrei-calazans.bsky.social•190 days ago

This wiser than you think when you consider FlatList's default virtualization config. By default it renders 21 pages, so consider a page with 8 visible items that's 168 items rendered. Most usages don't fetch over 40 items at once

ashtonlance.com•191 days ago

Impressive! What inspired you to write a new List component for RN?

jayz.us•191 days ago

It was @mojavad.bsky.social's talk on new architecture at @reactadvanced.gitnation.org that gave me the idea, then I prototyped it on a train ride and it was surprisingly good 😅

henrypl.com•191 days ago

This looks great, will test it later today.

danabra.mov•191 days ago

would it be possible to do a version that doesn’t require the -state dependency? it seems like it should be possible to write the same windowing logic with imperative re-renders that don’t introduce an observable abstraction in the middle. not sure if you feel super strongly about it!

danabra.mov•191 days ago

it implies buying into the -state model which feels dicey to me (so far i’ve only had to remove these kinds of observable bindings from codebases i worked in — and people have been creating them since 2014). plain react components tend to outlive these abstractions & work with all react features

danabra.mov•191 days ago

i might be missing something though! curious if you consider this part essential to it and how exactly that manifests — couldn’t quite understand it from reading

jayz.us•191 days ago

Yes, absolutely. This was the easiest way for me to prototype and experiment with minimizing renders and get something out asap, but I’m planning to change it to do it imperatively so I can remove the dependency. I’ll try to release an update in the next few days.

jayz.us•188 days ago

Done!

https://bsky.app/profile/jayz.us/post/3lbmt36ymfk2j

danabra.mov•188 days ago

thanks! this really helps understand what it does

nanniii.bsky.social•191 days ago

100% js means we could get a similar api as web and be able to do pagination ui for lists like Urql suggest ??

unintuitive.com•191 days ago

Super hyped to try this. My hobby project (which has a demo mode) uses FlashList and it's annoyingly janky https://guardianghost.com/ will try and use it this weekend

jayz.us•191 days ago

Let me know how it goes!

frankcalise.dev•191 days ago

Will be trying this out on a client project with heavy list rendering, maybe Friday or early next week

Nice work!

jayz.us•191 days ago

Awesome! Let me know if you encounter any issues and will fix asap.

kabanks.bsky.social•191 days ago

Ik it’s pretty new, but how does it compare with Skia List that was announced not too long ago?

jayz.us•191 days ago

I haven't tested it, but could be an interesting comparison! Looks like Skia List would require big architecture changes to render items with skia instead of regular RN components? But I could see how it could potentially be faster to fully control all rendering...

arnabxd.bsky.social•187 days ago

such perf diff while staying 100%JS is awesome

roessner.tech•191 days ago

Any benchmarks on how this compares for example to @shopify/flash-list?

jayz.us•191 days ago

There's an example app in the repo which is what I recorded for that video. I'll work on making a good benchmark. From what I can tell it seems faster though.

Comments

Posting Rules

Reply