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

React Memo | useMemo | useCallback - Optimize Performance of your React Applications

Justin Kim
2020 ж. 9 Ақп.
57 083 Рет қаралды
Жүктеу

In this video we first discuss the concept of memoization. Then we learn about how to optimize the renders of your React Components by learning about these three memoization techniques: 1) Memoize your components with React.memo(), 2) Memoize a computed value with the useMemo() hook, 3) Memoize a function with the useCallback() hook.
🗄 Resources:
Further Reading on React Memo: dmitripavlutin.com/use-react-memo-wisely/
Official React API: reactjs.org/docs/react-api.html
Lodash: lodash.com/docs/4.17.15
🔑 Key Concepts:
- React Components
- React.Memo
- useCallback
- useMemo
- Lifecycle Methods
- Renders
#React #Memo #Hooks

Пікірлер

  • Very informative, thorough, and concise. Good job, Justin. Thanks.

    @nickstaresinic9933@nickstaresinic99332 жыл бұрын

  • Very informative , Thank you! Been searching for someone who explains advanced react since a while, looks like we have a winner!

    @AbdelhameedG@AbdelhameedG2 жыл бұрын

  • Once again a wonderful explanation on different react hooks and how to use them properly. thanks for your time. God Bless and Good Health.

    @sakarsr@sakarsr4 жыл бұрын

  • This explanation and demonstration was amazing, I really understood it! Thank you 🙏🏽

    @MmmMmmGood17@MmmMmmGood172 жыл бұрын

  • Great video on demonstrating the differences of each hook and hoc. Thanks justin!

    @davidk3133@davidk3133 Жыл бұрын

  • great video! very simple and direct example to explain the memo concept very clearly. it's a fresher course for me about memorization in React.

    @hanjelly5410@hanjelly54103 жыл бұрын

  • Amazing video, the only one that actually explained all the nuances.

    @akalrove4834@akalrove48342 жыл бұрын

  • Man, please doing more and don't stop! You have some fantastic topics and go really into detail in all of them!! Just discovered your channel and damn man. I promise you keep going and you will have 500k :D

    @Koko-pg8wu@Koko-pg8wu8 ай бұрын

  • This is the best explanation of these 3 tools I've seen. Thanks for the amazing video!

    @danstuart7326@danstuart7326 Жыл бұрын

  • This is a great explanation of those 3 features. Thank you!

    @heyniks1@heyniks1 Жыл бұрын

  • the best explanation on the topic I've ever seen Thank you so much

    @khotambakhromov@khotambakhromov3 жыл бұрын

  • Hey, Justin. just wanted to say thank you for your video. one of those few videos I can understand without even looking at the screen. A great explanation.

    @GodfatherOfKcontent@GodfatherOfKcontent Жыл бұрын

  • Thank you for this explanation. This is maybe the first video that clearly explains how and when one should use useMemo, useCallback.

    @nson__@nson__4 жыл бұрын

  • Very well explained. Thank you!

    @FranzJose@FranzJose Жыл бұрын

  • Thank you!! This was the best explanation, simple and easy to understand.

    @MonicaSalamanca@MonicaSalamanca2 жыл бұрын

  • Thank you for making such a great video!

    @ryantian3491@ryantian34913 жыл бұрын

  • Dude your'e awsome, to understand usecallback I have read many articles and still left confused. Now youre explanation made me understand . Hats off

    @arunprakash8859@arunprakash88593 жыл бұрын

  • Saw so many videos on these topics, And finally found something that stuck the landing for me. This is an important frontend interview topic, thank you so much.

    @thatindianviewer3110@thatindianviewer31102 жыл бұрын

  • This filled a lot of gaps left by other explainers, thank you 🙏

    @m3ll0f3ll0@m3ll0f3ll02 жыл бұрын

  • incredible video, the only one that explained clearly and correctly how to use the "areEqual" function. I've been struggling with this for a few days and you helped solve the issue. Thanks for sharing your knowledge

    @federicostraus869@federicostraus8692 жыл бұрын

  • Way you explain things makes everything clear without any doubt, so far best teacher, thank you.

    @9704084143@97040841432 жыл бұрын

  • Great explanation on the optimisation! Thanks so much..

    @nehaprakash3073@nehaprakash30732 жыл бұрын

  • This must be like the 10th video I watch about the topic and this is the first time I really understood! Thanks!

    @alexcostaSE@alexcostaSE Жыл бұрын

  • Really good explanation! Thank you for your work!

    @eneiarestivan@eneiarestivan Жыл бұрын

  • You explanation makes it so easy to understand. Thanks

    @tmosco5149@tmosco5149 Жыл бұрын

  • Amazing work, best example

    @yadwindersingh9722@yadwindersingh97222 жыл бұрын

  • Thanks for the clear explanation.

    @sarbjitbilling7535@sarbjitbilling75353 жыл бұрын

  • Thanks for sharing!

    @ludwigvillalba1886@ludwigvillalba1886 Жыл бұрын

  • you are awesome man , clear and crisp explanation

    @punitdixit861@punitdixit8613 жыл бұрын

  • Thanks for the video. I really needed this. Great explanation.

    @berakoc8556@berakoc85563 жыл бұрын

  • Awesome explanation, I understood the concept!!. Thank you very much.

    @praveen_javali@praveen_javali Жыл бұрын

  • Simple and easy to understand. Thank you

    @armanulalam4560@armanulalam45602 жыл бұрын

  • Great explanation, concept clear. Thanks!

    @sologuitardeshchatterjee@sologuitardeshchatterjee Жыл бұрын

  • Fantastic explanation. Thank you. ❤️

    @bilal-khan@bilal-khan3 жыл бұрын

  • Great explanation Justin. Thank you 😊

    @xdankitjain@xdankitjain2 жыл бұрын

  • This is so sick Justin🔥 Amazing explained 🤩

    @WIBEDRILLMusic@WIBEDRILLMusic2 жыл бұрын

  • thanks....this is helps me more than videos on other channels:)

    @dxxta@dxxta4 жыл бұрын

  • Thanks for the knowledge

    @kitchenandgardeninglab7636@kitchenandgardeninglab76362 жыл бұрын

  • awesome explanation!

    @KevinAlves-xb3je@KevinAlves-xb3je Жыл бұрын

  • Great explanation. 🔥

    @dinuka@dinuka2 жыл бұрын

  • Just awsome .. everything in one video

    @kamleshkumar-vm8cj@kamleshkumar-vm8cj2 жыл бұрын

  • man.. you are incredible.. wish you made more videos like this.. :)

    @Abhishek-vz6ud@Abhishek-vz6ud Жыл бұрын

  • The best explanation of React.memo,useCallback,useMemo. Thank you soo much,have a blessed day Sir.

    @chamnil8666@chamnil86663 жыл бұрын

  • Awesome, very instructional. Thanks.

    @rojochen@rojochen2 жыл бұрын

  • great video, very helpful, thanks

    @user-ex4dk6ge6c@user-ex4dk6ge6c Жыл бұрын

  • so nicely explained, just wow

    @asifurrahman8257@asifurrahman82573 жыл бұрын

  • Godly explaination...shoutout to you man..great job

    @Ashishkumar-wo7ck@Ashishkumar-wo7ck Жыл бұрын

  • Simple content with a deep understanding of React hooks. Look at the statistics, haters do not exist here.

    @mrtandon5278@mrtandon52783 жыл бұрын

  • Very helpful video! Thank you! :)

    @kulcsarrudolf17@kulcsarrudolf173 жыл бұрын

  • wonderful explanation

    @joonwantsdat@joonwantsdat2 жыл бұрын

  • Really helpful, thank you

    @monashamsolebad6839@monashamsolebad6839 Жыл бұрын

  • Excellent 👌👍🎉🎉

    @mrajkishor331@mrajkishor3318 ай бұрын

  • Thanks a lot buddy ...So helpful 😮

    @rajverma5051@rajverma5051 Жыл бұрын

  • It took me a while but I understood everything, excellent explanation!!!!

    @user-eb2nj1zf8o@user-eb2nj1zf8o Жыл бұрын

  • awesome explanation thank you

    @rebinabdollahi3483@rebinabdollahi34835 ай бұрын

  • Cool work man!

    @drewstifler1440@drewstifler14403 жыл бұрын

  • Thanks for the wonderful explanation...

    @ruchirai5775@ruchirai57753 жыл бұрын

  • a great explanation.

    @AliRaza-hf9bz@AliRaza-hf9bz2 жыл бұрын

  • Thank you so much Sir! I learned a lot!!

    @constWardtz@constWardtz3 жыл бұрын

  • Great video. thank you so much

    @yogeshshetty804@yogeshshetty8043 жыл бұрын

  • thanks a lot, the explanation was clear and easy to understand

    @pt8817@pt88172 жыл бұрын

  • This is an incredible tutorial. I really like how expand on why things are behaving the way they are, such as when you removed the counter dependency from the useCallback hook. A+ material.

    @boring-username@boring-username4 жыл бұрын

    • I dont mean to be off topic but does anybody know a tool to get back into an instagram account?? I was stupid lost my account password. I would appreciate any tips you can give me.

      @noahjared1596@noahjared15962 жыл бұрын

    • @Noah Jared instablaster ;)

      @adrienjairo6750@adrienjairo67502 жыл бұрын

    • @Adrien Jairo thanks for your reply. I got to the site on google and I'm in the hacking process atm. Looks like it's gonna take a while so I will get back to you later with my results.

      @noahjared1596@noahjared15962 жыл бұрын

    • @Adrien Jairo It did the trick and I actually got access to my account again. Im so happy:D Thanks so much you really help me out :D

      @noahjared1596@noahjared15962 жыл бұрын

    • @Noah Jared No problem :)

      @adrienjairo6750@adrienjairo67502 жыл бұрын

  • Thank you for the video, please fetch some time to make such kind of videos

    @aayushgalav5528@aayushgalav5528 Жыл бұрын

  • refreshing video

    @himanshushekhar3694@himanshushekhar3694 Жыл бұрын

  • Nicely explain.

    @pushkaragnihotri1609@pushkaragnihotri16093 жыл бұрын

  • The comment section itself shows how perfect this tutorial is.. No words. Just incredibly easy to understand..

    @nitinrahangdale1128@nitinrahangdale11283 жыл бұрын

  • Ultimate explanation 👏👏 Understood the concepts clearly now 😍😍 Subscribed

    @sachinsenakulk@sachinsenakulk Жыл бұрын

  • Woow great explanation

    @amancca@amancca3 ай бұрын

  • great job

    @huzafaarshad973@huzafaarshad973 Жыл бұрын

  • An amazing explaination.

    @AliSattarBarani@AliSattarBarani3 жыл бұрын

  • Wonderful....

    @akshay-yeole@akshay-yeole2 жыл бұрын

  • very very help full man thanks thanks very much

    @mikiyaskelifa853@mikiyaskelifa853 Жыл бұрын

  • great explanation, thanks!

    @sansanbycas@sansanbycas4 жыл бұрын

    • glad I can help!

      @AngleCoding@AngleCoding4 жыл бұрын

  • thanks for these

    @shabnamnaaz4676@shabnamnaaz46763 жыл бұрын

  • excellent explaination in the KZhead on memorization so far.But please explain an practical use case of memorization so that we can understand where to use this concept..🙂🙂

    @kishore5358@kishore53582 жыл бұрын

  • thank you so much

    @AM-nm6ts@AM-nm6ts Жыл бұрын

  • Great stuff 👍! Can you please make more videos about react performance and advanced techniques 🙏🙏🙏

    @artgurianov@artgurianov4 жыл бұрын

    • I will do! Please stay tuned

      @AngleCoding@AngleCoding4 жыл бұрын

    • @@AngleCoding We're still waiting. :(

      @thesnjvsharma@thesnjvsharma2 жыл бұрын

    • @@AngleCoding y Tut

      @ramalaxmi5562@ramalaxmi55622 жыл бұрын

    • @@AngleCoding year passed where are videos

      @S4LTYT@S4LTYT2 жыл бұрын

  • good stuff thx

    @karimk8551@karimk85512 жыл бұрын

  • Thank you

    @alexgolomb363@alexgolomb3632 ай бұрын

  • thank you pal

    @harmez7@harmez7 Жыл бұрын

  • Awesome

    @mgrm7031@mgrm70313 жыл бұрын

  • awesome awesome awesome

    @hassanribery3093@hassanribery30932 жыл бұрын

  • thank u very much

    @analogguy4467@analogguy44672 жыл бұрын

  • Damn.. 4 interviews attended, i wasn't able to answer memo, useMemo, useCallback. Now i not just know what are these,i also know why and in which scenarios these can be used. Thank u😃

    @ArunK678@ArunK6782 жыл бұрын

  • Thank you for that tutorial! Your way of explenation is something what I was looking for :) What kind of font are you using in your IDE? It remains me font from VS Code. Thanks!

    @jakobo5521@jakobo5521 Жыл бұрын

  • greetings !, excellent video, but I can see the arrow pointing down at the end setCounter, is it an extension?

    @shisui_@shisui_3 жыл бұрын

  • Thank you! Come back to KZhead!

    @vonderklaas@vonderklaas2 жыл бұрын

  • nice

    @kiranmohare6276@kiranmohare6276 Жыл бұрын

  • Very good explanation, I'm understood the concept. However, which tools did you use to make this video ?

    @engenglish610@engenglish6103 жыл бұрын

  • So at the end when you talk about the 'memo' high order component and checking if the props are equal in your own function, doesn't this essentially do the same as memoizing the function passed to the child component?

    @codedbyjordan@codedbyjordan2 жыл бұрын

  • you won't notice the component rerendering not because react is fast in the rerendering process but because react did not even update the actual dom while the component props,state, elements did not change

    @farahiismail969@farahiismail9692 жыл бұрын

  • is it possible to avoid re-render the child sibling component if the child component state changes?

    @gajendramahadev1203@gajendramahadev12032 жыл бұрын

  • hi .. how to use useCallback inside the useEffect

    @ossamaelidrissi2624@ossamaelidrissi26242 жыл бұрын

  • One question only? What if child doesn't get the counter as prop but get setCounter as a props, so when we click the child the counter state in Parent changes, but is there a way to stop the child re-render it, TLDR; when child changes parent's state is there a way to stop child from re rendering if child is not getting the changed state as prop because in useCallback it will be a dependency so it will remake the function

    @paritoshsingh588@paritoshsingh5882 жыл бұрын

  • why u stop making videos? we need a mentor like u

    @Fatima-ie5kj@Fatima-ie5kj2 жыл бұрын

  • I don't get the difference, both your useMemo and useCallback are functions in your example

    @VisoBoard@VisoBoard7 күн бұрын

  • 18:06

    @SH-lt2iv@SH-lt2iv3 жыл бұрын

  • why not use React.memo( component,isEqual ) to compare coming props's function is same or not and replace React.useCallback() hook , this function can recreate forever but we can stop the renderers :)

    @smithdragon6477@smithdragon64773 жыл бұрын

    • if the updateCounter becomes a renderProp with jsx , does useCallback can prevent rerenders for me ?

      @smithdragon6477@smithdragon64773 жыл бұрын

  • Why don't react just do all this stuff out of the box!!?

    @grumpycoder4592@grumpycoder45923 жыл бұрын

    • Because it's just javascript, that's how javascript works by default.

      @okekehinde7206@okekehinde72063 жыл бұрын

  • Changing props does not cause a re-render! It is only true if the prop is state, it's changing state that causes a re-render.

    @prince5922@prince5922 Жыл бұрын
KZhead