Learn useMemo In 10 Minutes

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

thanks bro ,, I understand very well ..

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 ?

you are a skillful and smart ,patient youngster

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.

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

Appreciate your effort , well thanks for providing effective content

perfectly explained

nice hair

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

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

W teacher

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

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

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

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

how easily u make things make sense 👏

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

Great video

Clear as crystal. Thank you for the vid!

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

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

great job

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.

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

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

Thanks Kyle for explanation.
Separate thanks for your clear english.
It's easy to hear and to understand each word you say.

Ohh, thank so much! I watched you video 3 month ago and didn't understand second case, but now you open my eyes! Thanks a lot!

Was this that easy ? Thanks Adrian...!

Thankyou soo much for these amazing videos i thought i know react and I hate JS but no now i realise that i hate JS even more than i knew🥹

Bravo! Great explanation!

Great video kyle!

This was the best example to understand useMemo. Thanks a lot!

In the original program, will the slow function aka doubleNumber is still triggered if it is not called in return.

nice explanation thanks

so the code will work the same if I use useEffect, what is the difference ?

in first case where useMemo is used to wrap slow function so that it runs only when number changes, why dont we use useEffect for that

Key Differences
- useMemo is used to memoize values.
- useCallback is used to memoize functions.

Usage:
- Use useMemo when you have a computation that you want to avoid recalculating unless necessary.
- Expensive calculations that don’t need to be recalculated every render.
- Derived state that involves costly processing.
- Large lists or data sets that require processing before rendering.
- Passing objects or arrays as props to prevent unnecessary re-renders of child components.
- Complex dependency arrays in hooks.
- Use useCallback when you have a function that you want to avoid recreating unless necessary.

Return Value:
- useMemo returns the result of the computation.
- useCallback returns the memoized function.

Couldn't understand referential equality concept 😢

what is the difference between onClick={()=> setDark(prevDark => !prevDark)} and onClick={()=> setDark(!dark)} ? ?

That was great! I really finally understood it! :3

Man this man is so gorgeous, it's ridiculous.

bro your explanations are insane

Thank you Kyle! for giving such clarity in explanation

state updates in react cause re-renders. Sometimes in our component, we might have some code that takes some time to evaluate and we don't want that code to evaluate with every re-render if it is not going to make any difference. So we use the useMemo hook which prevents that time-consuming code from re-executing with every re-render. useMemo allows us to pass a dependency array to it and this way the code inside useMemo runs only when a dependency changes. useMemo stores the return value of the cb function we pass to it and returns that value from memory if the dependency hasn't changed.