Learn useMemo In 10 Minutes

Howz it different from useEffect, as useEffect we can only run when certain value change.

it's also important to note that if you need a calculation to run once, instead of using useMemo you could put the function in the argument of another useState, and save it there. As this is also a performance technique

Dude, I have been watching your videos from past 1-2 yrs, Y don't you dump your entire courses on Pluralsight or Udemy man!! It's worth the pay.

great job

In the second example, couldn't you just use a useEffect on the dark useState?

Correct me if I'm wrong:
'useMemo' return every time new 'themeStyles' object -> every time 'dark' changes new 'themeStyles' object is created -> You can move 'useMemo' dependencies to 'useEffect' without any useMemo needed.

I understand that dependencies can be confusing without 'useMemo', but in this app it's correct to use:
const themeStyles = {
backgroundColor: dark ? 'black' : 'white',
color: dark ? 'white' : 'black'
}
useEffect(() => {
console.log('Theme Changed')
}, [dark])

Clear as crystal. Thank you for the vid!

Great video

Honestly I use test exact code , but not see any changes

how easily u make things make sense 👏

oooh that was the best explanation i've seen so far

Thank you so much. I'm doing a project for my school and you just saved me my ass!

Edzack ... edzackly ... edzack values.... is that how he's spelling it?

Please how effective would it be to use useEffect to fetch data from an api with an empty dependency array and use useMemo to watch for change and update accordingly, I would like to know if this practice would work and how effective it would be as I have my useEffect rerendering endlessly anytime I put the state of the response in its dependency array

W teacher

i literally been searching in udemy for a course that explain react hooks like this saw couple of videos but none of theme get to that great content quality feels guilty to get that for free thanks man

watching your video before i got the job, watching ur video after i got the job

nice hair

perfectly explained

Appreciate your effort , well thanks for providing effective content

Can you link react hooks to their docs in the blog that would be very useful, thanks <3

To make the 'slowFunction' slow the console.log needs to go inside the for loop:

function slowFunction(num) {
for (let i = 0; i <= 5000; i++) {
console.log("Calling Slow Function");
}
return num * 2;
}

otherwise it's just counting, which isn't noticably slow.
I was staring at it for ages, thinking "this isn't really slow" - take the count way down, try 1,000 and gradually increase.

you are a skillful and smart ,patient youngster

thats great, first example and second explain the issue great way. After first one , I told myself hah what is the different between useEffect and useMemo then I got answer :D In that way as far as understand if use useEffect with array or object it is useless and we have to use useMemo ?

thanks bro ,, I understand very well ..

The amount of clarity Kyle gives while explaining complex concepts is truly unmatched, certainly my go to channel to learn tough concepts.

This is awesome!!!

@Anyone in referential contradiction or something why not use the dark variable in the use effect itself its a much simpler solution than to memorize let me know @All

cant we use useEffefct and pass number in the dependency array and call the function inside it. so that only when number changes, function gets triggered. ?

Awesome explaination

Regarding the first use case, can't we achieve the same using useEffect? running a function only when a certain variable (state variable or prop variable) changes. what is the main difference between using useEffect and useMemo in that first scenario

awesome work kyle 🤩

yoooooooooou aaaaaaaaaare awesomeeeeeee

Best video about useMemo on internet

Beautifully explained as usual Kyle

But you can use useEffect twice intead of useMemo, it will be the same...right? Or I'm missing something...

So basically useEffect runs everything inside its body and re-renders everything on the page based on the dependency being triggered, while useMemo runs everything inside its body but only re-renders the parts of the app that connect to its return statement based on the dependency being triggered, right?

Thanks

you are a legend Sir! going through a Meta certified frontend course and they did a pretty bad job at explaining memo, I already knew where I have to come to understand it better and I was correct.

very nice explaination

Well explained, Kudos Kyle.

Great video as always! 🔝
Question: I've read that use memo should be used only when calculations are heavy performance wise.. I didn't get why? Could you explain?

This was an excellent explanation! Thank you!

1- What is the difference between react useMemo and React.Memo.
2- What is the difference between lodash memoize method and react useMemo?

Best UseMemo video I've seen so far, good job Kyle !

Do you ahve a video where you point out the differecnce betwee useMemo and useEffect?