FlatList is killing the performance of your app

  Рет қаралды 29,857

notJust․dev

notJust․dev

Күн бұрын

Lists are one of the most common components in React Native, but the FlatList has always been kinda slow and buggy when dealing with large lists. FlashList comes to solve this problem as a Fast & Performant React Native List.
In this video, we will compare the performance of the FlatList vs FlashList and see if it indeed improves the performance by x5 as it claims.
📚 Join the waitlist for "The Full-stack Mobile Developer" to be notified when we release it again
academy.notjust.dev/
💬 Join the notJust Development gang and let's build together
/ discord
Tag me on social media when you finish this build, and I will give you feedback on your project.
➤ / vadimnotjustdev
➤ / vadimnotjustdev
➤ / vadimsavin
➤ / vadimnotjustdev
This video is not sponsored by anyone
Disclaimer: This build is for educational purposes only!! All views, opinions, technology choices expressed in this video are my own and do not represent the views, opinions, technology choices of any entity whatsoever with which I have been, am now, or will be affiliated.
#VadimSavin #notjustdev #reactnative

Пікірлер: 55
@notjustdev
@notjustdev Жыл бұрын
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev in 2023! Check out what our successful students are saying about their experience: academy.notjust.dev
@GreatVolcano
@GreatVolcano Жыл бұрын
It's a cool video. Can you do more videos for optimize RN apps?
@Muzly
@Muzly Жыл бұрын
I second this suggestion.
@DevRSC
@DevRSC Жыл бұрын
Same here
@fouadchahd2969
@fouadchahd2969 Жыл бұрын
Saaame
@JokeBookGames
@JokeBookGames 11 ай бұрын
second
@JesusMendoza-ky7et
@JesusMendoza-ky7et Жыл бұрын
Just tested this on our app and it’s so much better! We have components in a Flatlist with remote images and where the standard FlatList mounts all of them triggering the requests, FlashList actually mounts components as you scroll so almost no network requests on mount! Then I could see the network requests come in as I scroll all with essentially the same API. Great video!
@mystik5551
@mystik5551 Жыл бұрын
Awesome, been searching for something better. Will definitely try it
@betelgeus2029
@betelgeus2029 Жыл бұрын
Thanks! it will be very useful for my project.
@nguyenhuynh6769
@nguyenhuynh6769 Жыл бұрын
Great! I really like this video. It's useful for beginer as me.
@surbhitrao
@surbhitrao Жыл бұрын
Can you also compare recyclerlistview vs FlashList? That will be an intresting watch
@rudeadyet1992
@rudeadyet1992 Жыл бұрын
Thanks for the Cool video! BTW the new architecture would drastically improve such issues. Have you guys thought of experimenting the new RN "Bridgeless" architecture in the near future?
@anum2471
@anum2471 Жыл бұрын
very informative 🤘👍
@jayshreesolanki8080
@jayshreesolanki8080 Жыл бұрын
Very helpful 👍👍
@davidlintin
@davidlintin 10 ай бұрын
Hey nice video. However your thumbnail shows a SectionList. Is there a FlashSectionList?
@gamingwithsanjay5748
@gamingwithsanjay5748 Жыл бұрын
hey I have made reavt native with firestore that is too slow can you tell what to use to make it fast?
@ytexchanger3093
@ytexchanger3093 Жыл бұрын
Thanks for the video bro... but i have a really important question. Is there anyway we can display react native/component over other apps just like Facebook messenger?
@osmtechbox2658
@osmtechbox2658 Жыл бұрын
Yes I did this on android but you need to use native module and write code on native side. I did code for floating view in java which will be visible outside the react native app.
@karoche-tv
@karoche-tv Жыл бұрын
My application Uber clone in react cli crashed. After installing build gradle version 6.5 and plugin version 4.1.0. And build tools 29.0. Please help me.
@FunGames_099
@FunGames_099 Жыл бұрын
You are a beauty dude
@visheshgupta4990
@visheshgupta4990 3 ай бұрын
Thanks it is very nice one
@maxaquilino7264
@maxaquilino7264 6 ай бұрын
Very impressive video! I'm using Animated.FlatList from Animated react-native library. How can I implement FlashList in that scenario?
@thiagosilvaloopes
@thiagosilvaloopes 19 күн бұрын
Check out the FlashList documentation, they have a section about the implementation of react native reanimated with it
@hungtran7681
@hungtran7681 Жыл бұрын
I tried and got this error: Invariant Violation: requireNativeComponent: "AutoLayoutView" was not found in the UIManager.How can i fix that? thanks
@mycraplife
@mycraplife Жыл бұрын
Did you find a solution?
@edena276
@edena276 Жыл бұрын
Is that component stable enough to use on all sort of devices either new or old and iOS or Android ?
@chetanbawankule2035
@chetanbawankule2035 Жыл бұрын
This is important questions
@notjustdev
@notjustdev Жыл бұрын
It has been well tested internally by Shopify team before making it public. Now, the library is stable for production
@edena276
@edena276 Жыл бұрын
@@notjustdev Oh ok cool then ! Thank you and let's try it !
@teflonhav
@teflonhav Жыл бұрын
thanks!
@surajmohanty528
@surajmohanty528 Жыл бұрын
Great 👍
@rakaprathama8307
@rakaprathama8307 Жыл бұрын
hey can you create video rn for new architecture?
@jon-michaelnarvaez710
@jon-michaelnarvaez710 11 ай бұрын
This is great! but fails to build on Android when using RN 0.70.8
@lingarajsahoo3583
@lingarajsahoo3583 Жыл бұрын
❤️
@MrRahulmalik
@MrRahulmalik Жыл бұрын
Tried it for about 100+ items. Components are a lil complex with nesting but scrolling is still poor and visible blank areas in android
@shubhamrathore5825
@shubhamrathore5825 Жыл бұрын
Except these issues do you feel the worth of using this ...
@MrRahulmalik
@MrRahulmalik Жыл бұрын
@@shubhamrathore5825 if you have a pretty simple item layout and don't need the missing features then yes it is better than normal Flatlist, keep in mind it only works when you apply all the optimizations that they specify in order to be more efficient
@shubhamrathore5825
@shubhamrathore5825 Жыл бұрын
@@MrRahulmalik Thanks for this information!
@valkyrieqp
@valkyrieqp 9 ай бұрын
we tried to make the switch but the blank areas were a dealbreaker
@MrRahulmalik
@MrRahulmalik 9 ай бұрын
@@valkyrieqp I solved it by exposing the native Android list to RN and using it, it's fast and smooth and no blank areas!
@jokofrassetia3075
@jokofrassetia3075 Жыл бұрын
TOP
@BoundlessCode
@BoundlessCode 10 ай бұрын
Does that mean its faster than recyclerlistview
@sulthan0022
@sulthan0022 2 ай бұрын
I cannot run the second command for some reason do you know what happen?
@notjustdev
@notjustdev 2 ай бұрын
What error are you getting?
@sulthan0022
@sulthan0022 2 ай бұрын
@@notjustdev unknown command
@brencancer
@brencancer Жыл бұрын
i get error when using this on expo "CommandError: Required property 'android.package' is not found in the project app.json. This is required to open the app."
@chetanbawankule2035
@chetanbawankule2035 Жыл бұрын
Vooooo
@mohamadmomin5640
@mohamadmomin5640 Жыл бұрын
hello sir can you please make video on voximplant message Am really stuck so please help me
@swatantragoswa1
@swatantragoswa1 4 ай бұрын
first time i saw you i you are justin bieber
@SonGoku-ep4wj
@SonGoku-ep4wj Жыл бұрын
Vadim sorry ur front end skills are horrendous
@lasue7244
@lasue7244 9 ай бұрын
I know people need to touch the 10 min mark, but when padding the content is so shameless, it feels like creator does not respect his viewers time. Like first 3:30 of this video can be completely skipped
@notjustdev
@notjustdev 9 ай бұрын
Not doing it intentionally. Thanks for feedback
@lasue7244
@lasue7244 9 ай бұрын
@@notjustdev sorry man. I was rude. Try to include good info instead of trivial things to get that 10 min. It won't hurt me if I learned more
@notjustdev
@notjustdev 9 ай бұрын
@@lasue7244 cheers
@theturk75
@theturk75 Жыл бұрын
cool video
Glow Stick Secret 😱 #shorts
00:37
Mr DegrEE
Рет қаралды 122 МЛН
маленький брат прыгает в бассейн
00:15
GL Show Russian
Рет қаралды 3,9 МЛН
YouTube's Biggest Mistake..
00:34
Stokes Twins
Рет қаралды 66 МЛН
Advanced React Native FlatList animations at 60fps with Animated API
20:11
FlashList - make your lists faster now - M. Fořt | React Native EU 2022
22:31
INSANE OpenAI News: GPT-4o and your own AI partner
28:48
AI Search
Рет қаралды 252 М.
5 React Native Performance Optimization  Tips  ✅  | Engineer Codewala
7:45
SIX mind-blowing React Native optimization hacks
4:45
Jelvix | TECH IN 5 MINUTES
Рет қаралды 4,3 М.
{Webinar} How to optimize React Native app performance?
1:03:16
Callstack Engineers
Рет қаралды 3,5 М.
FlatList Animations in React Native with Reanimated 2
59:15
notJust․dev
Рет қаралды 11 М.
I suspect someone is playing tricks, but I have no evidence
0:27
[Gegagedigedagedago] Nuggets Mukbang Girl and Cocomelon Jelly
0:24
DOJU 도주
Рет қаралды 7 МЛН
He Threw A Banana Peel At A Child🍌🙈😿
0:27
Giggle Jiggle
Рет қаралды 3,9 МЛН