You've Been Building React Native Lists Wrong All Along

[@galaxies_dev]

⚡ Stay on top of Expo commands with my new cheat sheet: download.galaxies.dev/cheat-sheet

[@samuelscheit]

Thanks for the shoutout :) I'm currently working on publishing the react-native-skia-list package and also making it easier to write components

[@galaxies_dev]

Wow that would be awesome!

[@szymcioxd]

It's a pleasant surprise to see my "Don't re-render all FlatList items" blog post in your video. 🙇‍♂ I'm subscribing your channel since a long time and your videos help me keep up to date. I'm glad that my work also can be a part of it and help others. Thanks! 🚀

[@galaxies_dev]

Thank you for the great article!!

[@surajmohanty528]

Looks like onReachEnd is calling multiple times. Is there any workaround for this?

[@mldddd]

Hey Szymon, thanks for the cool article! Don't know where to react so i'll do it here. Normalization is a cool partern to know that can help in this situation, but I would like to point out that it's not the only solution: Here, to prevent perf issues, you can keep the data as is, but rather memoize the Items (and their props like setValue in your example). This way, the component containing the Flatlist (and its data) will re-render, renderItem will be called for each item, BUT the items that haven't changed will not re-render (it's that costly part we need to prevent). I believe that this memoization/optim will also be automatically done by the new React Compiler which should make this "Flatlist issue" disappear!

[@vuc__vuc]

i had the size problem with the flashlist while building a manga reader app... i had to build my own scrollable component for my use case

[@SatoshiNakamono]

I’m also building the manga app. Can I contact you?

[@yuvrajcreationz5921]

Just curious to know, how do you guys include mangas in ur apps? Like download them first and then insert locally or is there a free api available 🤔?

[@Dik131WZD]

What is your way staying informed about actual best practices in RN world?

[@galaxies_dev]

Following a bunch of resources, mailing lists and channels!

[@chfaaizmehmood7709]

Can we get a code example of flashlist ?

[@madmaxdev]

Been using flashlist from the beginning.

[@galaxies_dev]

Good idead

[@CeleChaudary]

Awesome!

[@galaxies_dev]

Thanks!

[@mshayat4974]

Thanks for the information Simon. What if we compare this with flutter...!!!!! which will give more performance?

[@КириллЛ-ы8ш]

Flutter of course. In Flutter we just use build-in ListView, we don’t worry about meomezation, cells to pre-render, amount of view updates and etc. ListView in Flutter just works with 120fps even with complicated cells. Last but not least, when you found what you can do with slivers… it will blow your mind. But Flutter comes with other issues, still not a silver bullet.

[@miketaylor253]

I wonder what alternatives there are available in RN to using JSON for pulling data from the server, which maybe a bit more efficient, gRPC/protobuf possibly?

[@ziembajan]

tRPC FTW 💪

[@sourabhsingh4515]

where is your video on the new react native release ??? the bridgeless architecture

[@galaxies_dev]

Still working on that :D

[@sourabhsingh4515]

@@galaxies_dev Please bring it soon waiting for your video !!!

[@sivsovanpanhavorn6296]

I have problem with both flatlist and flashlist rendering infinity scroll where data is around 100+

[@aymenbachiri-yh2hd]

Thank you so much simon

[@galaxies_dev]

You are welcome!

[@Engazan]

i dont use flashlist cuz when i add animations it mess whole app, like white flashbank when screen is mounted ..., and u cant add animations for just flatlist, it apply animations for whole app :/ that strange flashback is with combination with RN Navigation 6, cuz it changes navigation animations

[@mottahh4162]

Flashlist lacks in rtl support

[@NotEsc_]

Can We Get a Code Example Of FlashList ?

[@ngonimugumwa6374]

It's nearly exactly the same as Flatlist syntax, but also just check out the documentation, it's pretty great.

[@hamamathivha6055]

Used FlatList and then FlatList, but for some reason the scroller gets "stuck" when I switch out elements in the list. I might be doing something super dumb but it's really annoying coz I'm building a super simple one page app. Really considering moving to another framework like flutter for this.

[@hamamathivha6055]

Ahh fixed it!

[@duttaoindril]

React Native Skia is just react native rebuilding flutter in js 😂

[@galaxies_dev]

Skia is widely used not only in Flutter, but yes it's a very performant way.