React Native Performance Optimisation (useMemo, useCallback, memo)

Поділитися
Вставка
  • Опубліковано 16 жов 2022
  • 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 Рік тому +25

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

  • @eduardocabrera9710
    @eduardocabrera9710 8 місяців тому +1

    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.

  • @ashishmehra2661
    @ashishmehra2661 Рік тому +1

    Serious stuff. Thanks for sharing.

  • @jahidunnurmaheeofficial2089
    @jahidunnurmaheeofficial2089 11 місяців тому +1

    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!

  • @mounteverest4013
    @mounteverest4013 Рік тому +1

    Thanks a lot for this. Apply this ASAP

  • @anazi
    @anazi Рік тому +1

    Really good example and amazing explaination 👍👍 Much appreciated.

  • @stf8375
    @stf8375 Рік тому

    Amazing and super well explained thanks !!!

  • @chetanbawankule8843
    @chetanbawankule8843 Рік тому +1

    Thank you for this
    This is going to be very helpful

  • @ko_rizki
    @ko_rizki 8 місяців тому

    that was a clear explanation, thanks, love it.

  • @carlosceronsantacruz6854
    @carlosceronsantacruz6854 Рік тому +1

    Amazing video, Good job

  • @parthkolgiri7501
    @parthkolgiri7501 7 місяців тому

    Some quality stuff mate!!

  • @comment-dev
    @comment-dev Рік тому +1

    Good explanation to optimize rn 🤝

  • @HaiTran-tz7hm
    @HaiTran-tz7hm Рік тому

    Thank u for the really good example bro 🤘

  • @minusmarigold98
    @minusmarigold98 4 місяці тому

    Wow , really thanks man i needed that a lot!

  • @manikantsharma6108
    @manikantsharma6108 7 місяців тому

    Well understood, great video

  • @WOW-fo8gx
    @WOW-fo8gx 10 місяців тому

    Great video. Thanks a lot.

  • @trendscene5374
    @trendscene5374 Рік тому +1

    Mesmerizing

  • @felipemelendez5741
    @felipemelendez5741 Рік тому

    This was awesome, thanks!

    • @henrycovil2629
      @henrycovil2629 9 місяців тому

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

  • @lubwamaemmanuel7743
    @lubwamaemmanuel7743 2 місяці тому

    Learn something beautiful for my react native projects. Kudos bruv

    • @notjustdev
      @notjustdev  2 місяці тому

      Glad you learned something new 🚀

  • @calebcadainoo
    @calebcadainoo Рік тому +1

    Interesting will explore the Flipper too 😉

  • @oneafrodev
    @oneafrodev Рік тому +1

    well understood!

  • @JanghyupLee
    @JanghyupLee Рік тому

    Very easy to understand :)

  • @brainpowerofficial1207
    @brainpowerofficial1207 Рік тому +1

    Amazing from my crew

  • @sykn3z
    @sykn3z Рік тому +13

    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

  • @jabbarahmad5095
    @jabbarahmad5095 Рік тому +1

    Amazing

  • @SahilSharma-ws1oz
    @SahilSharma-ws1oz 5 місяців тому

    Amazing thanks you ❤

  • @ajagannath898
    @ajagannath898 7 місяців тому

    Excellent explanation bro never show in pratical way in UA-cam ❤❤❤❤

  • @geohn8238
    @geohn8238 4 місяці тому

    Powerful video 👌🏼💪

  • @abdallasuliman8165
    @abdallasuliman8165 8 місяців тому

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

  • @VickysTuition
    @VickysTuition 10 місяців тому

    Thank you 👍👍👍

  • @venkynavindla6795
    @venkynavindla6795 10 місяців тому +1

    U R D BEST!

  • @sudharsan685
    @sudharsan685 Рік тому +1

    Usefull video 👌

  • @anazi
    @anazi Рік тому +1

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

  • @rajkamalsingh2547
    @rajkamalsingh2547 Рік тому +1

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

  • @abdelazizelmehammedy9376
    @abdelazizelmehammedy9376 Рік тому +2

    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

  • @amiribrahim01
    @amiribrahim01 Рік тому

    Thank you

  • @JkeyKong
    @JkeyKong 7 місяців тому

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

  • @doniaelfouly4142
    @doniaelfouly4142 Рік тому

    thanks

  • @congdung7599
    @congdung7599 Рік тому +1

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

  • @jakubmuzik3296
    @jakubmuzik3296 10 місяців тому

    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 ?

  • @FauziJabbar
    @FauziJabbar Рік тому

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

  • @hascardenas
    @hascardenas Рік тому +1

    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 Рік тому +1

      Thanks! We’re using React Native CLI here

    • @hascardenas
      @hascardenas Рік тому +2

      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

  • @asqarpubgmobile
    @asqarpubgmobile Рік тому +1

    Cool😎

  • @andrepadez
    @andrepadez Рік тому +1

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

    • @AnksioXD
      @AnksioXD 9 місяців тому

      its called Flipper

  • @rodelcrisosto499
    @rodelcrisosto499 Рік тому

    can you please make a guide about flipper?

  • @showbikshowmma3520
    @showbikshowmma3520 Рік тому

    Is this valuable for large scale dynamic applications.

  • @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

  • @shadic7858
    @shadic7858 9 місяців тому

    Memo also works when the component props includes an array?

  • @necmettinsargn3934
    @necmettinsargn3934 Рік тому

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

  • @areebchoudhary3785
    @areebchoudhary3785 2 місяці тому

    Great work buddy, Love from Pakistan 💚🤍

  • @sashomilenov2630
    @sashomilenov2630 Рік тому

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

  • @rohitbansal9183
    @rohitbansal9183 11 місяців тому

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

  • @applicationdeveloper9057
    @applicationdeveloper9057 Рік тому

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

  • @ziahazara1250
    @ziahazara1250 Рік тому +2

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

  • @gouravnainwaya5669
    @gouravnainwaya5669 Рік тому +1

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

  • @aidanwalker3058
    @aidanwalker3058 8 місяців тому

    How do I install flipper on expo?

  • @beingMeditative56
    @beingMeditative56 9 місяців тому

    '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.

  • @milon27
    @milon27 10 місяців тому

    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 Рік тому

      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.

  • @wailynnoo3498
    @wailynnoo3498 2 місяці тому

    May i know your debugging tools ?

  • @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?

  • @zksofficial-zh1gh
    @zksofficial-zh1gh 11 місяців тому +1

    Need flipper tutorial

  • @JokeryEU
    @JokeryEU Рік тому

    why not use flashList ? instead of flatList

    • @notjustdev
      @notjustdev  Рік тому +1

      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
    @bilalrasool8696 7 місяців тому

    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
    @alexfrozen Рік тому

    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
    @ThomazMartinez Рік тому

    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 🫀