Learn React Hooks: useMemo - Simply Explained!

Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
In this video we will learn about React hooks, starting with useMemo. This powerful React hook will allow you to fix your performance problems by memoizing a value and only re-computing when necessary. You will learn how to identify expensive computations in your components, how they affect the performance of your React app, and how to implement React's useMemo to memoize the value and use the dependency array to only compute when necessary.
In this new React world, hooks are here to stay, so it's best to learn them! In this tutorial I demonstrate the useMemo React hook, and I explain it very simply and in a way that is easy to understand. Enjoy!

Пікірлер: 197

  • @cosdensolutions
    @cosdensolutions2 ай бұрын

    Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react

  • @EnesKab

    @EnesKab

    Ай бұрын

    Please add also NextJS to the Project React Course 🙂

  • @robboerman9378
    @robboerman937823 күн бұрын

    After watching 3 of your videos I have learned more than reading 3 books on React. Your videos are exceptionally clear. Thanks

  • @abhishekprajapati6849
    @abhishekprajapati68496 ай бұрын

    This was my first and the last useMemo tutorial. I just loved the way you isolated the concept along with a really simple explanation. Thank you!

  • @LauraDuranVelazquez-md4ot
    @LauraDuranVelazquez-md4ot11 күн бұрын

    Thank you for explaining these concepts so simply! Love your videos.

  • @areebafatima7436
    @areebafatima74367 ай бұрын

    I am so happy that I got landed to this channel. So concise, loving it.

  • @kacperstepien8640
    @kacperstepien86406 ай бұрын

    The best useMemo explanation I've seen.

  • @amarmusovic7748
    @amarmusovic77482 ай бұрын

    This could be the best useMemo tutorial I've seen. And I've seen a lot. Almost too many. 😂 Oh, and I love that you keep rounding 29.999.999 to 29 million. Made me chuckle every time... 🤗🤗

  • @sahasrabhujaneuron5975
    @sahasrabhujaneuron597511 ай бұрын

    I've been struggling with this concept, but this video really made it easy and simple to understand. Many thanks!

  • @cosdensolutions

    @cosdensolutions

    11 ай бұрын

    glad it helped! 🤙

  • @smrpkrl
    @smrpkrl7 ай бұрын

    thank god i stumbled upon your channel..i am learning about all the hooks that react has to offer through your channel..i am loving the clear explanations that you provide..not a single dull moment in the video! kudos to you sir! love you!!!

  • @HerlonCosta
    @HerlonCosta4 ай бұрын

    It's definitely the best explanation I've ever seen. Thank you very much!

  • @mostinho7
    @mostinho74 ай бұрын

    Done thanks clear 6:50 useMemo memoizes the result of a calculation/ function call until some dependencies change

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

    As someone still new to react and web dev in general, this is awesome, the main hooks I’ve been using have been useState and useEffect. Would be great to see one about useRef too :)

  • @cosdensolutions

    @cosdensolutions

    Жыл бұрын

    It's coming! Just started this 😁

  • @Ksahdia
    @Ksahdia8 ай бұрын

    Thank you very much for the easier explained concepts. I'm watching your videos to understand my lessons better. Both compliment each other well.

  • @cosdensolutions

    @cosdensolutions

    8 ай бұрын

    wonderful!

  • @fizdanielz
    @fizdanielz9 ай бұрын

    You have the best tutorials channel 🙌🙌🙌🙌

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

    Wow... perfectly explained man, Thanks.

  • @netaivgi
    @netaivgi4 күн бұрын

    So simply explained! wow, amazing

  • @mehdiSupp
    @mehdiSupp4 ай бұрын

    Timing the "like and subscribe" popup exactly after you explain the solution is genius. I clicked like and it felt good I don't know why lol

  • @harshitkrvishwakarma3602
    @harshitkrvishwakarma36026 ай бұрын

    Love your explanations, you have made react a lot simpler.

  • @uquantum
    @uquantum8 ай бұрын

    Really useful tutorial. Thanks for being so helpful!

  • @allan_gr
    @allan_gr9 ай бұрын

    Simply explained indeed, Thank you.

  • @user-me6tr8ko6m
    @user-me6tr8ko6m3 ай бұрын

    you are THE BEST to explain!

  • @pragatijadhav26
    @pragatijadhav263 ай бұрын

    Best explanation ever. understand in one go.

  • @user-lg2xl1ik9k
    @user-lg2xl1ik9k3 ай бұрын

    the best video explains useMemo!! thank you so much!

  • @user-rs9pc1cu7v
    @user-rs9pc1cu7v8 ай бұрын

    So good! You explained it perfectly!

  • @DarkRider213
    @DarkRider2134 ай бұрын

    this was a perfect explanation - thank you!

  • @badenis1291
    @badenis12914 ай бұрын

    Made me rethink the way I was seeing this hook. Thanks

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

    that was very helpful, thank you for clearing the confusion

  • @WaseemAhmad-mf3wh
    @WaseemAhmad-mf3wh3 ай бұрын

    Thank you for your clear explanation ❤

  • @jaykaytech
    @jaykaytech4 ай бұрын

    the most clear explanation!

  • @harag9
    @harag97 ай бұрын

    Great video, thanks for this, I'll have to look at implementing this now.

  • @2029leandro
    @2029leandro3 ай бұрын

    This guy is the best teaching react stuff

  • @martrom0
    @martrom02 ай бұрын

    Wonderful !! 👏 I subscribe right away !

  • @dharylcarryalmora5414
    @dharylcarryalmora54144 ай бұрын

    I like your tutorial very short and will explain. Thank you so much 😊😊

  • @mandardeshpande7976
    @mandardeshpande79768 ай бұрын

    No one has ever articulated this topic so well. Because it's simple yet confusing. Also I was tired of watching premium full blown course about shopping cart app with tailwind and what not, all to explain the few key concepts hardly for 5 mins which eventually gets buried somewhere in the middle. Thanks for the short and sweet content.

  • @LowriKate
    @LowriKate11 ай бұрын

    Great explanation, thank you!

  • @user-dq1to7hg2n
    @user-dq1to7hg2nАй бұрын

    Great explanation!

  • @agosolsgaming4036
    @agosolsgaming40363 ай бұрын

    awesome explanation, thanks

  • @coolme7437
    @coolme74375 ай бұрын

    Best tutorial for useMemo!

  • @varnerdamasceno8093
    @varnerdamasceno809311 күн бұрын

    This video helped me a lot.

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

    Well explained Thank you very much.

  • @reactdev2838
    @reactdev28386 ай бұрын

    Once again great tutorial...

  • @athmaram4256
    @athmaram42567 ай бұрын

    Great explication bro. Thank you very much

  • @Viva-07
    @Viva-074 ай бұрын

    Awesome...very well explained

  • @BBocho
    @BBocho7 ай бұрын

    great explanation, thank you very much!

  • @RickCodez
    @RickCodez9 ай бұрын

    Very well explained!

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

    Thank you, great explanation

  • @adiletbaimyrzauulu6589
    @adiletbaimyrzauulu65898 ай бұрын

    Hey, i really like your way of explaining. I bought an online course on React, but sometimes I just don't get it on the course, and your videos make it super duper clear for me. Thank you for your job, wish you all the best, and I hope some day you are going to have 500k subs on youtube.

  • @cosdensolutions

    @cosdensolutions

    8 ай бұрын

    thank you for the kind words! I'm also working on a course by the way, will have this teaching style and a really well thought out plan that I haven't seen done in another course before! Coming in a couple of months

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

    Great video I just begin my react js journey and can easily understand the concept

  • @hoangtran-ek8mn
    @hoangtran-ek8mn9 ай бұрын

    Ohhh mannn. Why are you so good at teaching? Thank you so much!!!

  • @cosdensolutions

    @cosdensolutions

    9 ай бұрын

    You're most welcome ☺️

  • @samahgad241
    @samahgad2415 ай бұрын

    thanks alot , very helpful🌹

  • @nawazishali274
    @nawazishali27410 ай бұрын

    Ohh man nicely explained 🎉❤

  • @rood4449
    @rood444911 ай бұрын

    that is the perfect fundamentals . it was very efficient to understand the how important useMemo . thx :)

  • @cosdensolutions

    @cosdensolutions

    11 ай бұрын

    Glad you found it useful! 🤙

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

    Appreciate your explanation ! thanx

  • @arek9430
    @arek94305 ай бұрын

    Good stuff, thanks

  • @PriyaToliwal
    @PriyaToliwal5 ай бұрын

    Hi, your way of teaching is very easy to understand and helps me learn more concepts. Please make a video on Reactjs Forms as well.. it would really help me understand forms better. Thanks for making learning so easy and effective.

  • @OXIDE777-is6gs
    @OXIDE777-is6gs Жыл бұрын

    Great one!! thanks bro

  • @jitujahagirdar613
    @jitujahagirdar6134 ай бұрын

    Thanks for this video 👍👍👍 really good way that you explain . I am lazy person who understand only if simplify way to explain of context and you did it 😜🤗. Good job..!😊

  • @SWE507
    @SWE5073 ай бұрын

    Im enrolled in a couple of intermediate and advanced react courses.. even bought a couple of books.. But man, your vids are waaay better and so amazing! clear and concise!!!! i wish you had a full on intermediate/advanced react course. i would gladly pay for that! Thank you so much for existing!!!

  • @cosdensolutions

    @cosdensolutions

    3 ай бұрын

    I'm just about to launch a course that has 2 parts. The first part is more beginner, the second is more intermediate/advanced ☺️ if you get it when it launches you get both for the price of one

  • @SWE507

    @SWE507

    3 ай бұрын

    Will be sure to do so!! thank you! :D @@cosdensolutions

  • @abhinavdhama3014
    @abhinavdhama30147 ай бұрын

    Amazing amazing amazing explanation bro . ♥️♥️♥️♥️♥️. Plss do a javascript series also

  • @mathemagicstelugu7848
    @mathemagicstelugu78485 ай бұрын

    Really its a Last Usememo video for me🥰🥰🥰

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

    Best video ever❤❤

  • @romanzaritskyi303
    @romanzaritskyi3033 ай бұрын

    Thanks, man

  • @user-mr8rv8yb8v
    @user-mr8rv8yb8vАй бұрын

    best teaching

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

    Well explained

  • @user-pu5eh6mm6y
    @user-pu5eh6mm6y7 ай бұрын

    dude you're awesome. Thank you so much for your explanations, now I guess I don't need to watch other videos about react hooks :)

  • @cosdensolutions

    @cosdensolutions

    7 ай бұрын

    ☺️

  • @user-se7fr3pt8s
    @user-se7fr3pt8sАй бұрын

    Thanks man

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

    thank you so much

  • @isaac-9185
    @isaac-91859 ай бұрын

    Really well explained, thank you. Also mind dropping a list of most common cases that you would use useMemo for?

  • @cosdensolutions

    @cosdensolutions

    9 ай бұрын

    I would only use it when there's an expensive computation to make, or when I want to prevent this from causing a expensive child component to re-render

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

    God tier video

  • @thatkannurgirl
    @thatkannurgirl4 ай бұрын

    Thank you

  • @Vishal360
    @Vishal3604 ай бұрын

    every tutorial of cosden solution is last tutorial ur gonna watch - Fr ✌✌

  • @dstrader7583
    @dstrader758310 ай бұрын

    Thanks, Alot Man. Glad i picked your video first now i don't need to watch another video on this.

  • @cosdensolutions

    @cosdensolutions

    10 ай бұрын

    🤙

  • @AyushGupta-kp9xf
    @AyushGupta-kp9xfАй бұрын

    Nice explanation, appreciate that. Btw dude how do you spam that fast!

  • @akrm3240
    @akrm32408 ай бұрын

    Thanks a lot!

  • @user-th4cm8wr1p
    @user-th4cm8wr1p7 ай бұрын

    Hi sir, I am grateful that I landed here and learn some valuable concepts of useMemo, I have a question that on 11:30 minute you added the count as a dependency array, now when a count changes that computation will run again, then how the usememo is beneficial here, let me know please?

  • @cosdensolutions

    @cosdensolutions

    7 ай бұрын

    The useMemo is not to prevent a re-render, but rather control when it happens. In that example we did indeed invalidate what we did by adding count, however that's necessary. Our memo depended on count so we had to provide it. The benefit lies when we add a new state variable that is not related to that, then useMemo won't re-render when that changes. So again, we're not trying to prevent a re-render, but rather control when it happens and only have it happen when absolutely necessary, otherwise return the memoed value

  • @dharmeshgohil9375
    @dharmeshgohil93756 ай бұрын

    all your video is awesome keep it up ,make small project which make use of the all hooks how to use in company level or share some difficult situation of it when to use which hooks use it will be great help

  • @cosdensolutions

    @cosdensolutions

    6 ай бұрын

    Currently in the process of making a full on course with exactly that!

  • @uzairahmed2975
    @uzairahmed29753 ай бұрын

    Love it the way you explained everything single detail, Can I also use useMemo with autocomplete with fetch?

  • @cosdensolutions

    @cosdensolutions

    3 ай бұрын

    yeah you can!

  • @emmanuelareiza9699
    @emmanuelareiza969924 күн бұрын

    Ty bro

  • @vandermonke4178
    @vandermonke41789 күн бұрын

    Would be great if you push the code at the start of the video to a different branch and the end product to the master branch so we could code along

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

    Great

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

    Awesome explanation, thank you. Could you provide the name of the theme you are using too?

  • @cosdensolutions

    @cosdensolutions

    Жыл бұрын

    Material theme darker! 🤙

  • @gionniilbassotto
    @gionniilbassotto4 ай бұрын

    so useMemo is fairly similar to useEffect? but useEffect is called when the page is loaded and/or for some dependencies?

  • @dariotizzoni1517
    @dariotizzoni15178 ай бұрын

    Hi, I’m new to react and your videos are really helpful. I have two questions: 1. In the last specific scenario, is it really necessary using useMemo? I mean, the only cause of rerender is when count changes, so useMemo would compare every render the dependecies. 2. What is the differences between useMemo and useCallback?

  • @cosdensolutions

    @cosdensolutions

    8 ай бұрын

    1. In the context of the video, no it isn't. But the goal was to show you how it works! 2. useMemo returns a value, useCallback returns a function. They are the same otherwise!

  • @dariotizzoni1517

    @dariotizzoni1517

    8 ай бұрын

    Oh, that’s right! Really thanks 😊

  • @jackmackenzie8466
    @jackmackenzie84665 күн бұрын

    Great videos. 1 question though, when you have count and items in the hook, why doesn't that lag as it seems like the items are being looped each time count changes?

  • @BushidoWegDesKrieger
    @BushidoWegDesKrieger4 ай бұрын

    I reviewed some custom hooks and sometimes found useCallback/useMemo with an empty dependency array. Could you explain why that is?

  • @prasannagramopadhye4506
    @prasannagramopadhye450611 ай бұрын

    Great Explanation, thank you. I have 1 doubt. If I use useState to store the value of selected items and changed its value only when there is change in the dependency array of the useEffect hook, then will it produce the same result? If yes then what is the difference between the two ? function Demo({}: DemoProps) { const [count, setCount] = useState(0); const [selectedItem, setSelectedItem] = useState(0); const [items] = useState(initialItems); useEffect(() => { const temp = items.find((item) => item.id === count) setSelectedItem(temp) }, [items]) return ( Count: {count} Selected Item: {selectedItem?.id} setCount(count + 1)}> Increment ); }

  • @cosdensolutions

    @cosdensolutions

    11 ай бұрын

    So first of all in your example you're missing `count` in your dependency array. You want that useEffect to run as count changes, as well as when items changes. Second of all, that code is equivalent, but now you have an extra piece of state + the hook that keeps it in sync. The way I showed in the video is better because the "sync" happens automatically. That approach is better because it has less code (one less hook) and less responsibility (selectedItem is auto updated through `useMemo` without manually having to do anything) So you're basically doing the same work, just with extra dependencies, which isn't ideal 😁 best to keep things simple and automatic

  • @sweekiatwong8995

    @sweekiatwong8995

    9 ай бұрын

    was thinking the same thing glad to have found this exchange in the comments

  • @bbbeo8912

    @bbbeo8912

    5 ай бұрын

    Thank you both for asking and answer. I'm about to ask the same but got the point here.

  • @AbsolutePain
    @AbsolutePain4 ай бұрын

    Hey cosden, we can achieve the similar results using useEffect ? so how do we identify when should we use memo ? // Use effect equivalent: import { useState, useMemo, useEffect } from "react"; import { data } from "./utils/data"; const Counter = () => { const [arr] = useState(data); const [selectedValue, setSelectedValue] = useState(0); useEffect(() => { const val = arr.find((elem) => elem.isSelected); setSelectedValue(val); }, [arr]); const [count, setCount] = useState(0); return ( Count:{count} setCount(count + 1)}>+1 selectedValue : {selectedValue.id} ); }; export default Counter; Thnaks for the video. Can you make a complete project in react with best practices. Thanks.

  • @cosdensolutions

    @cosdensolutions

    4 ай бұрын

    So while your example works, it's not the recommended approach. The way you have it, you have an extra state variable that you have to manage and a whole useEffect to manage it. If you do it like I showed in useMemo, then selectedValue automatically gets re-computed when the array changes, and you don't have to do it yourself. That's why it's a better approach. There are a lot of times where something shouldn't be done with an useEffect even if it can, just because it introduces an extra dependency you have to manage and keep up to date. Also, your example creates an extra render cycle in the component which is unnecessary

  • @jritzeku
    @jritzeku8 ай бұрын

    This hooks series are great!! I had a question.Is there a way to gauge when to use useMemo vs not? In our case it made sense simply because of the sample size of array being over 29million but realistically it's hard to determine this intuitively...or even with our simply array at what size would be the cut off(to use/not use useMemo). I guess this question is applicable to useCallback too.

  • @cosdensolutions

    @cosdensolutions

    8 ай бұрын

    the general idea is to do it whenever you're mapping over something or computing something expensive. If you have that, you generally want to wrap that in useMemo so that it doesn't unnecessarily run every time. The more you work with it, the more experience you have and you learn to intuitively know when and when not to use it

  • @krzysztofrozbicki1776
    @krzysztofrozbicki17766 ай бұрын

    I really like your videos - they are very informative and educational. I have only one question - what if we know that items won`t change (e.g. these are the static backend property). Could we define the selectedItem outside the component and then use it. e.g.: import { initialItems } from './utils'; const selectedItem = initialItems.find(item => item.isSelected); functionDemo({}: DemoProps){ //Rest of code without any of useState and useMemo hooks for items } It will work and the find will run only once, (when refreshing the website and rendering the full component); I know that it would be working only in edge case when we are 100% sure that neither initialItems nor item.isSelected will never change on this component and is static. Could you explain to me why it would be considered bad practice.

  • @cosdensolutions

    @cosdensolutions

    6 ай бұрын

    It wouldn't be bad practice but in your example your value is static, not from the backend. If it came from the backend you'd have to fetch it in a component and then you need to do what I did in the video. But yes if it's just a random static variable in some file, sure you can do what you did. Even put selectedItem in that same file too and just import it

  • @TorreLoCascio-mq1bx
    @TorreLoCascio-mq1bxАй бұрын

    How does React know if "items' changes with looping through all 29mil items? Wouldn't that be the same performance issue we had? Thanks, great tutorial in general.

  • @2ameridiem
    @2ameridiemАй бұрын

    What is the difference between useMemo and useEffect? If we wrap the selectedItem function inside a useEffect like- useEffect( ( )=>{ const selectedItem=items.find((item)=>item.isSelected) },[items ] ) then it's serving the same purpose.

  • @davronmaxmudov3972
    @davronmaxmudov39727 ай бұрын

    Super cool video. What is your Vs code theme

  • @cosdensolutions

    @cosdensolutions

    7 ай бұрын

    material theme darker

  • @davronmaxmudov3972

    @davronmaxmudov3972

    7 ай бұрын

    Thanks bro @@cosdensolutions

  • @InarusLynx
    @InarusLynx27 күн бұрын

    Makes me think of react query. Prevents unnecessary api calls to your backend by multiple options to control fetches.

  • @buildsome
    @buildsome4 ай бұрын

    What will be the impact if we use useEffect in this example with selectedItem as another state? Apart from useMemo memoising the result. I am asking in this specific example?

  • @cosdensolutions

    @cosdensolutions

    4 ай бұрын

    It would be an extra state and useEffect to manage, plus another render cycle. It's always best to derive state whenever possible

  • @Code_with_random
    @Code_with_random13 күн бұрын

    Can we use multiple use effect in one component

  • @yuongeon1476
    @yuongeon14766 ай бұрын

    Thanks! That's useful for me. And one ques it that may have some diff between use "const [item] = useState(initial)" and "const item = useRef(initial)" in ur case?

  • @cosdensolutions

    @cosdensolutions

    6 ай бұрын

    yeah there is a difference, check out my video on useRef to really understand!

  • @yuongeon1476

    @yuongeon1476

    6 ай бұрын

    @@cosdensolutions Thank for that, and can u make a video about Memo (not useMemo) cause i wonder when to use it

  • @cosdensolutions

    @cosdensolutions

    6 ай бұрын

    @@yuongeon1476 check out useCallback, I show it there!

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

    In this case, if the count changes frequently and the re-render is only triggered by it, using useMemo here would be unnecessary. Right?

  • @jasonliu6321
    @jasonliu63216 ай бұрын

    Hi Cosden, I do not figure out why do we need to use useState to wrap the initialItems. Does it make much sense?

  • @cosdensolutions

    @cosdensolutions

    6 ай бұрын

    Because the items can change over time and for that you need state!

  • @cordial
    @cordial7 ай бұрын

    But when you add count to the use memo dependency array, are you not now doing the find again on every click? Oh I guess this isn't a long running task now as its not searching through the whole array any more. But, doesn't that negate the reason to add useMemo in the first place?

  • @cosdensolutions

    @cosdensolutions

    7 ай бұрын

    Yep it does, but that's what you want. You don't want to prevent a re-compute, but rather control when it happens. You need the count to perform that operation so there's no way around it. However if you added a new state variable and changed that, then it wouldn't re-compute. It would without useMemo. That's the goal, to control and only when needed re-calculate!

  • @AlvaroDoune
    @AlvaroDoune4 ай бұрын

    Why is faster compare if the items array change than find function?