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

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

[@sakarsr]

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

[@MmmMmmGood17]

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

[@AbdelhameedG]

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

[@Koko-pg8wu]

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

[@nickstaresinic9933]

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

[@hanjelly5410]

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.

[@nson__]

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

[@thatindianviewer3110]

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.

[@davidk3133]

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

[@khotambakhromov]

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

[@akalrove4834]

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

[@federicostraus869]

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

[@alexcostaSE]

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

[@heyniks1]

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

[@m3ll0f3ll0]

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

[@MonicaSalamanca]

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

[@nehaprakash3073]

Great explanation on the optimisation! Thanks so much..

[@GodfatherOfKcontent]

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.

[@tmosco5149]

You explanation makes it so easy to understand. Thanks

[@arunprakash8859]

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

[@9704084143]

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

[@eneiarestivan]

Really good explanation! Thank you for your work!

[@chamnil8666]

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

[@artgurianov]

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

[@AngleCoding]

I will do! Please stay tuned

[@thesnjvsharma]

@@AngleCoding We're still waiting. :(

[@ramalaxmi5562]

@@AngleCoding y Tut

[@S4LTYT]

@@AngleCoding year passed where are videos

[@praveen_javali]

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

[@sologuitardeshchatterjee]

Great explanation, concept clear. Thanks!

[@FranzJose]

Very well explained. Thank you!

[@armanulalam4560]

Simple and easy to understand. Thank you

[@WIBEDRILLMusic]

This is so sick Justin🔥 Amazing explained 🤩

[@nitinrahangdale1128]

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

[@xdankitjain]

Great explanation Justin. Thank you 😊

[@dxxta]

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

[@punitdixit861]

you are awesome man , clear and crisp explanation

[@yadwindersingh9722]

Amazing work, best example

[@berakoc8556]

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

[@boring-username]

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.

[@noahjared1596]

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.

[@adrienjairo6750]

@Noah Jared instablaster ;)

[@noahjared1596]

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

@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

[@adrienjairo6750]

@Noah Jared No problem :)

[@Abhishek-vz6ud]

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

[@user-eb2nj1zf8o]

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

[@Ashishkumar-wo7ck]

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

[@sachinsenakulk]

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

[@rojochen]

Awesome, very instructional. Thanks.

[@mrtandon5278]

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

[@kamleshkumar-vm8cj]

Just awsome .. everything in one video

[@ryantian3491]

Thank you for making such a great video!

[@aayushgalav5528]

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

[@bilal-khan]

Fantastic explanation. Thank you. ❤️

[@sarbjitbilling7535]

Thanks for the clear explanation.

[@pt8817]

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

[@user-ex4dk6ge6c]

great video, very helpful, thanks

[@asifurrahman8257]

so nicely explained, just wow

[@ruchirai5775]

Thanks for the wonderful explanation...

[@kishore5358]

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

[@constWardtz]

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

[@kulcsarrudolf17]

Very helpful video! Thank you! :)

[@rajverma5051]

Thanks a lot buddy ...So helpful 😮

[@kitchenandgardeninglab7636]

Thanks for the knowledge

[@joonwantsdat]

wonderful explanation

[@dinuka]

Great explanation. 🔥

[@rebinabdollahi3483]

awesome explanation thank you

[@monashamsolebad6839]

Really helpful, thank you

[@mikiyaskelifa853]

very very help full man thanks thanks very much

[@KevinAlves-xb3je]

awesome explanation!

[@yogeshshetty804]

Great video. thank you so much

[@sansanbycas]

great explanation, thanks!

[@AngleCoding]

glad I can help!

[@ArunK678]

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😃

[@AliSattarBarani]

An amazing explaination.

[@ludwigvillalba1886]

Thanks for sharing!

[@AliRaza-hf9bz]

a great explanation.

[@amancca]

Woow great explanation

[@shisui_]

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

[@jakobo5521]

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!

[@mrajkishor331]

Excellent 👌👍🎉🎉

[@drewstifler1440]

Cool work man!

[@pushkaragnihotri1609]

Nicely explain.

[@engenglish610]

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

[@codedbyjordan]

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?

[@AM-nm6ts]

thank you so much

[@huzafaarshad973]

great job

[@himanshushekhar3694]

refreshing video

[@akshay-yeole]

Wonderful....

[@hassanribery3093]

awesome awesome awesome

[@analogguy4467]

thank u very much

[@shabnamnaaz4676]

thanks for these

[@alexgolomb363]

Thank you

[@karimk8551]

good stuff thx

[@farahiismail969]

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

[@harmez7]

thank you pal

[@gajendramahadev1203]

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

[@vonderklaas]

Thank you! Come back to RUclips!

[@ossamaelidrissi2624]

hi .. how to use useCallback inside the useEffect

[@mgrm7031]

Awesome

[@VisoBoard]

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

[@paritoshsingh588]

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

[@Fatima-ie5kj]

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

[@kiranmohare6276]

nice

[@smithdragon6477]

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]

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

[@SH-lt2iv]

18:06

[@grumpycoder4592]

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

[@okekehinde7206]

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

[@prince5922]

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.

[@g.nirmalkumar5773]

Best Out there!