useMemo Explained | React Hooks useMemo Tutorial

[@sergiorey2049]

One of the very best videos I have seen about React and JS, I'm sure a lot of developers have come across issues like these not knowing exactly the cause and what to do, I wish I had seen this a year ago lol, great stuff Dave keep it up!

[@DaveGrayTeachesCode]

Thank you Sergio! I'm glad you liked it 💯🚀

[@TradingBloke]

you are literally the best javascript teacher on youtube or udemy or online , in few minutes you taught what others teach in 1 hour

[@nemanjadjoric8765]

Still can't believe this is a free course !!! Dave, you are an outstanding teacher !!!

[@DaveGrayTeachesCode]

Thank you, Nemanja! 🙏

[@rajeevranjansingh7103]

That's really awesome. Anyone can understand the real difference between useMemo and useCallback. Thanks a lot Dave😍😍

[@DaveGrayTeachesCode]

You're welcome! 💯

[@devworks8787]

Thank you very much. I had big trouble understanding the useCallback and useMemo hooks even though i have seen endless tutorials. But finally yours helped me understand it! I had big problem understanding if a usecallback should always be used alongside usememo. Now I finally understood

[@ifeanyichimbo]

Thanks so much Dave for your great lessons. Your explanations make it possible for a nub to get it.

[@tidyjii7348]

you're the best tech teacher in youtube!

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@MaksymMinenko]

This is one of the best explanations on what useMemo and useCallback are. You did an excellent job with this video - thanks!

[@DaveGrayTeachesCode]

You're very welcome! 💯

[@jsdragon6500]

This is an important advanced stuff for anyone who develope a largre react app

[@DaveGrayTeachesCode]

Absolutely! 💯

[@davidirawan3083]

always you are the best for explained some tutorial.Thanks dave

[@ahmad-murery]

Really informative video, Things can get tricky if you don't know how React renders components, therefore, it important to choose dependencies carefully and think twice before deploying code to a production server, Thanks Dave,

[@DaveGrayTeachesCode]

You're welcome Ahmad. I'm glad to see your comment 🙏

[@ahmad-murery]

@@DaveGrayTeachesCode I couldn't resist, with all of my troubles your videos keep challenging me, Have a nice day my friend

[@hosseinroosta5154]

The best video i could find on this topic. After a few days of searching, finally i could undestand. Thansk a lot mr dave ♥️🙏

[@DaveGrayTeachesCode]

Glad I could help!

[@bsen2267]

Good example Dave, immediately understood the use of UseMemo.

[@DaveGrayTeachesCode]

Glad to hear that!

[@chunli680]

Thanks for the great content as always! Really like the way you explain things, especially with the examples you gave :D

[@DaveGrayTeachesCode]

You're welcome! Thank you for the kind words 🙏💯

[@lsbernardes]

Thanks for the clear explanation!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@ArunPrabu007]

Clear explanation. Able to understand the real usage. Thanks alot

[@DaveGrayTeachesCode]

Glad it was helpful! 💯

[@Pareshbpatel]

Another great tutorial explaining React concepts, useMemo() in this case. Thanks, Dave {2022-10-19}

[@DaveGrayTeachesCode]

You're welcome!

[@ivanshoshkov]

Best tutor ever!

[@DaveGrayTeachesCode]

Thank you! 🙏

[@zineddinelouzani7069]

Hey form Algeria , you are doing a great work , keepit that way

[@DaveGrayTeachesCode]

Thank you! 🙏💯

[@ReactNinja]

Love your tutorials. 😍😍

[@DaveGrayTeachesCode]

Thank you!

[@appustudio8637]

Piece of gem. Nice explaination.

[@DaveGrayTeachesCode]

Thank you Appu!

[@h-robs]

Thank you! Such good explanations and examples

[@DaveGrayTeachesCode]

You're welcome! I'm glad it was helpful!

[@rishipaul9613]

I sincerely appreciate your efforts. The second use case of useMemo is explained very clearly without using React.memo(). Thank you very much🙂. I had a doubt when you were explaining that useEffect(( )=>clg('New Number), fib) was not executed again because fib is a primitive type and hence fib is the same during every render of the FC. I thought it was not executed because fib's value is not changing when we enter the value for randomInput. But I have better understanding then before thank you very much again🙂🙂🙂🙂🙂🙂🙂🙂

[@DaveGrayTeachesCode]

You're welcome! 💯

[@belkocik]

Thank you for that video! :-)

[@DaveGrayTeachesCode]

You're welcome!

[@vitaly_p]

Great video!

[@DaveGrayTeachesCode]

Thanks!

[@UnpluggedPerformance]

This is awesome!

[@DaveGrayTeachesCode]

Glad to hear that!

[@IshmaelMIRZAEE]

Thank you so much.

[@forstudy7900]

Thank you for this amazing tutorial.

[@DaveGrayTeachesCode]

You're very welcome! 💯

[@pratikdevle5830]

Great video, very easy to understand

[@DaveGrayTeachesCode]

Glad it helped! 🚀

[@vladserhiychuk8925]

Good stuff. Thanks from Ukraine.)

[@DaveGrayTeachesCode]

Welcome and hello to Ukraine! 👋

[@brahimo4701]

very helpfull thank you so much

[@DaveGrayTeachesCode]

You're welcome!

[@subhashgn1775]

Great explaination.👌

[@DaveGrayTeachesCode]

Thank you! 💯

[@onencanemmanuel4511]

Nice one

[@DaveGrayTeachesCode]

Thanks!

[@ankushagarwal7378]

Thanks man I got fullstack developer job because of you, I just can't thank you enough

[@DaveGrayTeachesCode]

Love to hear this kind of feedback! Congrats!!! 💯🚀🙌

[@ryan17stehle]

Is there a reason that the fib function is in the dependency array of useMemo and not useCallback? I can see the computed value "userNumber" being in the dependency array of useMemo, but why is the function there also?

[@oortcloud210]

I wondered this too - I know its inside the function but it seems it is entirely static so why would it need to be regarded as a dependency?

[@aya2222]

Great tutorial!! It might be stupid question but I don't get why fib function doesn't need dependency. we don't need to put 'n' in dependency? const fib = useCallback((n) => { return (n

[@DaveGrayTeachesCode]

useCallback provides a memoized function. It is not calling the function and therefore n is a parameter placeholder and not a value at this point. We apply useCallback to avoid redefining a function on every render. useMemo does call a function. Note the userNumber argument needs to be in the dep. array for useMemo.

[@moSaeedNahlous]

🤩🤩

[@hazemsayed633]

Do You Know that you are the best & special ?

[@DaveGrayTeachesCode]

Thank you!

[@samiullahsheikh5015]

So, if an function is defined in a separate file and is used in a component then there is no need to use useCallback hook. Right? Then what is the practical use case of useCallback?

[@DaveGrayTeachesCode]

This video is about useMemo, but for your questions about useCallback, I have a video here: kzbin.info/www/bejne/fHPCnIKJfdBkeq8

[@pauljbarry3]

Hey Dave, great video, I just have one question. When you move fib from outside the component to in the component, why do you have to add fib to the dependencies of the useMemo call? That function is in scope for the function passed to useMemo and fib is never going to change, so can you leave it out of the dependencies of the useMemo call?

[@DaveGrayTeachesCode]

Good question, Paul! When defined inside the functional component, the function will always be created again. It looks the same to us, but it will not have the same memory reference. I'm referring to what is called referential equality. This applies to objects, arrays, and functions. Therefore, we memoize the function with useCallback. Now it should have referential equality, but it is still a dependency of useMemo when we create the fib number. You will get a warning/complaint in your console from React if you do not add it to the dependency array. Of course, you could ignore that or put in a comment to disable the eslint for the next line.

[@khamzatilek9078]

tnx sir

[@DaveGrayTeachesCode]

You're welcome!

[@erictr5582]

Hi Dave, do you run online courses on Udemy?

[@DaveGrayTeachesCode]

No, but I do hope to release my own premium content in the future. I don't think I will use Udemy to release it though.

[@winterheat]

in the '80s, when people wrote BASIC, they had this GOTO statement and people call it spaghetti code, and they got rid of it forever, saying NEVER do that. We are now entering a new era where we need to "memo" a function, and figure out "the dependencies", wow, that's spectacular programming, even more great than "spaghetti"

[@Yusuf-ok5rk]

nice introduction lol

[@DaveGrayTeachesCode]

If you're not careful, your React apps can suffer from performance issues when you have a function that takes a moment or two to complete processing. By applying the useMemo React hook, you can avoid this kind of processing bottleneck. Just starting with React? I recommend my full 9 hour React course tutorial video here: kzbin.info/www/bejne/iIepcqx8jLRnndE

[@KILLCHRISU]

subbing because your teaching style is lovely. thank you for your great work Dave!

[@DaveGrayTeachesCode]

Welcome aboard!

[@keshavjha2641]

You are a legend 🙏🙏

[@mostafahusany1747]

Thank you very much Mr.Dave

[@DaveGrayTeachesCode]

You are very welcome, Mostafa!

[@mohammadmahdialvansaz8001]

Thanks