React Native Performance Optimisation (useMemo, useCallback, memo)

Ғылым және технология

In this video, we'll show you how to improve the performance of your application by employing three distinct techniques: useMemo, useCallback, and memo.
By the end of this video, we had increased our application's performance score by an insane +301,71%, so make sure to follow along to do the same for your app!
📚 Join the waitlist for "The Full-stack Mobile Developer" to be notified when we rerelease it:
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

Пікірлер: 83

  • @mateuszpusiewicz8851
    @mateuszpusiewicz8851 Жыл бұрын

    Amazing video! Tutorial on flipper would be great to see 🤩

  • @mounteverest4013
    @mounteverest4013 Жыл бұрын

    Thanks a lot for this. Apply this ASAP

  • @ashishmehra2661
    @ashishmehra2661 Жыл бұрын

    Serious stuff. Thanks for sharing.

  • @jahidunnurmaheeofficial2089
    @jahidunnurmaheeofficial208910 ай бұрын

    What a video! Last 2 weeks I was struggling with react native performance issue. I search in google and everywhere but finally I found a complete solution. Thanks dude!

  • @eduardocabrera9710
    @eduardocabrera97107 ай бұрын

    Thanks for the clearest explanation I have ever seen until now. Those examples were amazing, besides the demonstration convinced me to stop ignoring those react tools anymore.

  • @anazi
    @anazi Жыл бұрын

    Really good example and amazing explaination 👍👍 Much appreciated.

  • @chetanbawankule8843
    @chetanbawankule8843 Жыл бұрын

    Thank you for this This is going to be very helpful

  • @stf8375
    @stf8375 Жыл бұрын

    Amazing and super well explained thanks !!!

  • @ko_rizki
    @ko_rizki7 ай бұрын

    that was a clear explanation, thanks, love it.

  • @comment-dev
    @comment-dev Жыл бұрын

    Good explanation to optimize rn 🤝

  • @HaiTran-tz7hm
    @HaiTran-tz7hm Жыл бұрын

    Thank u for the really good example bro 🤘

  • @minusmarigold98
    @minusmarigold983 ай бұрын

    Wow , really thanks man i needed that a lot!

  • @notjustdev

    @notjustdev

    3 ай бұрын

    Glad it helped!

  • @sykn3z
    @sykn3z Жыл бұрын

    Great example and thank You!!!! Can You please do it with more complex ítems. Using custom hooks, redux selectors and fetching data. It would be extremly helpful

  • @parthkolgiri7501

    @parthkolgiri7501

    6 ай бұрын

    Yes please

  • @carlosceronsantacruz6854
    @carlosceronsantacruz6854 Жыл бұрын

    Amazing video, Good job

  • @WOW-fo8gx
    @WOW-fo8gx9 ай бұрын

    Great video. Thanks a lot.

  • @felipemelendez5741
    @felipemelendez5741 Жыл бұрын

    This was awesome, thanks!

  • @henrycovil2629

    @henrycovil2629

    8 ай бұрын

    flipper plugin!!! Maybe it's still relevant for you

  • @parthkolgiri7501
    @parthkolgiri75016 ай бұрын

    Some quality stuff mate!!

  • @manikantsharma6108
    @manikantsharma61086 ай бұрын

    Well understood, great video

  • @brainpowerofficial1207
    @brainpowerofficial1207 Жыл бұрын

    Amazing from my crew

  • @brainpowerofficial1207

    @brainpowerofficial1207

    Жыл бұрын

    Vadim if you can make a booking app. We will be waiting

  • @trendscene5374
    @trendscene5374 Жыл бұрын

    Mesmerizing

  • @abazudosen
    @abazudosen Жыл бұрын

    well understood!

  • @calebcadainoo
    @calebcadainoo Жыл бұрын

    Interesting will explore the Flipper too 😉

  • @lubwamaemmanuel7743
    @lubwamaemmanuel77432 ай бұрын

    Learn something beautiful for my react native projects. Kudos bruv

  • @notjustdev

    @notjustdev

    Ай бұрын

    Glad you learned something new 🚀

  • @SahilSharma-ws1oz
    @SahilSharma-ws1oz4 ай бұрын

    Amazing thanks you ❤

  • @JanghyupLee
    @JanghyupLee Жыл бұрын

    Very easy to understand :)

  • @jabbarahmad5095
    @jabbarahmad5095 Жыл бұрын

    Amazing

  • @VickysTuition
    @VickysTuition9 ай бұрын

    Thank you 👍👍👍

  • @anazi
    @anazi Жыл бұрын

    We need an explanation on "rendered fewer hooks than expected" This is killing me.

  • @geohn8238
    @geohn82383 ай бұрын

    Powerful video 👌🏼💪

  • @notjustdev

    @notjustdev

    3 ай бұрын

    Thank you 🙌

  • @sudharsan685
    @sudharsan685 Жыл бұрын

    Usefull video 👌

  • @ajagannath898
    @ajagannath8986 ай бұрын

    Excellent explanation bro never show in pratical way in KZread ❤❤❤❤

  • @abdallasuliman8165
    @abdallasuliman81657 ай бұрын

    Nice explanation and example, needs more clarification on useMemo vs useCallback.

  • @amiribrahim01
    @amiribrahim01 Жыл бұрын

    Thank you

  • @abdelazizelmehammedy9376
    @abdelazizelmehammedy9376 Жыл бұрын

    Thanks for your good tutorial I have a request for you can you please make a react native app which uses the react-query along with AsyncStorage persistance to make offline mutations that resumes after going back online thanks in advance

  • @jakubmuzik3296
    @jakubmuzik329610 ай бұрын

    Hello, would it be possible to wrap the flatlists renderitem in useCallback function instead of using the Reat.memo on the child component? Would it have the same result ?

  • @rajkamalsingh2547
    @rajkamalsingh2547 Жыл бұрын

    Great, Is there any article where i integrate or use flipper into my react native app.

  • @venkynavindla6795
    @venkynavindla67959 ай бұрын

    U R D BEST!

  • @andrepadez
    @andrepadez11 ай бұрын

    Awesome! What is the tool you're using to check performance?

  • @AnksioXD

    @AnksioXD

    8 ай бұрын

    its called Flipper

  • @FauziJabbar
    @FauziJabbar Жыл бұрын

    Coollll this's i find... mantap mas bruh

  • @doniaelfouly4142
    @doniaelfouly4142 Жыл бұрын

    thanks

  • @hascardenas
    @hascardenas Жыл бұрын

    Thanks for such a helpful video, I'd like to know if you are using Expo or React Native CLI on this video

  • @lukasgrinevicius5868

    @lukasgrinevicius5868

    Жыл бұрын

    Thanks! We’re using React Native CLI here

  • @hascardenas

    @hascardenas

    Жыл бұрын

    Thanks Lukas, I’d really like a video about config Flipper with Expo, I haven’t found any clear tutorial about it. Just a suggestion heheh 😆 thanks for answering

  • @JkeyKong
    @JkeyKong7 ай бұрын

    where to download the performance test tool in your video? I also want to test my react native performance like you

  • @congdung7599
    @congdung7599 Жыл бұрын

    Can you do a video how to add RN Perf monitor in react native project?

  • @beingMeditative56
    @beingMeditative568 ай бұрын

    'We are trying to check if those objects are allocated in the same space in memory", I heard this at 7:18 sec in video. Same space in memory or same object in memory ?? Got confused here, please clarify.

  • @asqarpubgmobile
    @asqarpubgmobile Жыл бұрын

    Cool😎

  • @touseefamjad416
    @touseefamjad416 Жыл бұрын

    Good sir can you please send me tha video link that define pagination in flast list because i see a large number of list is bad performance in flatlist

  • @necmettinsargn3934
    @necmettinsargn3934 Жыл бұрын

    Last time I tried work with flipper but it was very hard to start it. Is it easy now?

  • @showbikshowmma3520
    @showbikshowmma3520 Жыл бұрын

    Is this valuable for large scale dynamic applications.

  • @sashomilenov2630
    @sashomilenov2630 Жыл бұрын

    Great example! Could you tell me the name of the app that you are using for performance check? thank you.

  • @bryanmehall2208

    @bryanmehall2208

    Жыл бұрын

    flipper

  • @applicationdeveloper9057
    @applicationdeveloper9057 Жыл бұрын

    Hello i'm using same technique that you shwon still my logs appear every time on click can you help me ?

  • @rohitbansal9183
    @rohitbansal918310 ай бұрын

    Performance montor is not showing in disabled section in the flipper... Anything I need to add from the code side.

  • @shadic7858
    @shadic78588 ай бұрын

    Memo also works when the component props includes an array?

  • @ziahazara1250
    @ziahazara1250 Жыл бұрын

    What is the applications name by which you tested your applications performance? Can you please share it thanks 😃

  • @mariafailli5558

    @mariafailli5558

    Жыл бұрын

    Flipper

  • @areebchoudhary3785
    @areebchoudhary37852 ай бұрын

    Great work buddy, Love from Pakistan 💚🤍

  • @notjustdev

    @notjustdev

    Ай бұрын

    Thank you!

  • @rodelcrisosto499
    @rodelcrisosto49911 ай бұрын

    can you please make a guide about flipper?

  • @milon27
    @milon279 ай бұрын

    my react natiave app is showing that not able to use Rn perf monitor , why so?

  • @JKholmatov
    @JKholmatov Жыл бұрын

    I am updating location state via watchposition, and a component that does not include location props is re-rendering anyway, what can be the reason?

  • @stan_de

    @stan_de

    11 ай бұрын

    Is this a nested component? Then you should wrap it with memo and see Magic ;) When state changes - it will re-render component, hence it will also re-redender nested components as well.

  • @LanzRuizDesigns
    @LanzRuizDesigns Жыл бұрын

    hello may i know what platform you are using to test that react native app?

  • @LanzRuizDesigns

    @LanzRuizDesigns

    Жыл бұрын

    In the following question..do you have github for that demo?

  • @gouravnainwaya5669
    @gouravnainwaya5669 Жыл бұрын

    please make a file transfer app, a vpn app in react native without aws

  • @aidanwalker3058
    @aidanwalker30587 ай бұрын

    How do I install flipper on expo?

  • @wailynnoo3498
    @wailynnoo3498Ай бұрын

    May i know your debugging tools ?

  • @zksofficial-zh1gh
    @zksofficial-zh1gh10 ай бұрын

    Need flipper tutorial

  • @JokeryEU
    @JokeryEU Жыл бұрын

    why not use flashList ? instead of flatList

  • @notjustdev

    @notjustdev

    Жыл бұрын

    We have a separate video about FlashList, this one we wanted to keep focused on memo, useMemo and useCallback

  • @nishantmogha7679
    @nishantmogha7679 Жыл бұрын

    Can you please just increase the font size its really hard to see.

  • @bilalrasool8696
    @bilalrasool86966 ай бұрын

    Can you assist me in determining which version of Flipper is suitable, considering that Flipper has been deprecated. Additionally, React Native Debugger is not functioning with Expo SDK 49, and I'm encountering challenges using Redux in Expo SDK 49.

  • @alexfrozen
    @alexfrozen11 ай бұрын

    I declined usage of absolutely all react hooks. Even useState. Only props for decompositions. The only one render at the start. There is a game changer, Reanimated. It's really possible.I've forgot all these re-render nightmare. And have got absolute magic of animations, transitions, swipes and so on. So I heavily recommend research Reanimated in depth instead of all these stuff in video.

  • @ThomazMartinez
    @ThomazMartinez11 ай бұрын

    You dont need memo for this FFS dude, you just need to put that component where you have state changes in seperate component thats it, using memo stuff for everything it shows you have no clue what you doing

  • @nandanithakur2172
    @nandanithakur2172 Жыл бұрын

    wow 🫀

Келесі