React Hooks useMemo Tutorial

[@StephenRayner]

Clearly spoken, well structured, to the point, no umming and arring... These videos are fantastic.

[@adeoyeadela]

Wow I have spent more than 48hrs solving a problem with re-rendering but the last 5 minutes of this video saved my ass... :) thanks Ben

[@gustavolsilvano]

You're awesome! This is one of the best react channels on youtube

[@bawad]

Thank you!

[@dasnipa520]

wow this is extremely helpful, thank you my inner coding god

[@trentmiles5616]

Dunno if anyone cares but if you guys are bored like me during the covid times you can stream all of the latest movies and series on instaflixxer. Have been watching with my gf for the last couple of months :)

[@kobeshepard9776]

@Trent Miles yup, I have been watching on InstaFlixxer for months myself :)

[@WrongAkram]

You are awesome, thanks for making these types of videos!

[@thisisgksingh]

Amazing tutorial on useMomo hook. Thanks for this Ben.

[@WaterJay]

I start to think react might be going down a road of over complexity things. In order to do efficient rendering, u have to watch out all sorts of performance pitfall, considering react memo, usecallback, usememo along the way and pick the right dependency. This wouldn’t even be a problem if u you only change/update the value where it has been changed instead of do a freaking diff and render at any chance it get. Used to be react fan btw, now I’m thinking what’s the point and all these starts to get silly. All of a sudden, reactive programming looks charming

[@DiegoJutsu]

You are not alone

[@xerxius5446]

I love this hooks series. Thanks for the videos !

[@neelakshsharma4936]

Amazing stuff. After reading the hooks docs, if I don't get what it tries to convey, I refer these videos and it pretty clearly.

[@Kr00kan]

Straight to the point. Great video Ben!

[@Oxcorp]

A way you can find the largest word in an array is with the Array.reduce() method, here's how I did it: const longestWord = ['some', 'words'].reduce((biggest, curr) => { return curr.length > biggest.length ? curr : biggest }

[@EndiFreeKolesio]

It can get even easier with Array.find ;)

[@converter]

this is not algorithm channel :P ofcourse there's different ways to do that

[@nikosspiropoulos8417]

great video!!! explains a lot about both useCallback AND useMemo !!!

[@markdesign1354]

Great video! Quick Question: Isn't this same as calling computeLongestWord inside useEffect and setting longestword with useState?

[@bawad]

kind of, that would cause a rerender though

[@markdesign1354]

@@bawad I just did a quick test, seems to behave the same for me. Am I missing something? codesandbox.io/s/react-hooks-usememo-example-lowde

[@bawad]

yeah they would have similar behavior but calling the setter in useEffect would cause another render

[@markdesign1354]

@@bawad ah!.. got it. after I put a console.log outside computeLongestWord(), I can see the extra render without useMemo ! Interesting.., computeLongestWord() is still only called once in both scenarios, so performance seems to be negligible. Thanks for helping me understand it finally !!!

[@joracardanovsky4192]

I'm not sure why would you specify the function itself in the use memo second parameter. In which case would that be useful? By the way, thanks for your videos, extremely useful

[@shabeebck3057]

So basically useMemo is using to execute a function when a change value of its given dependency, thats amazing !

[@AntiMassovka]

Nice, bro. Like the way you code. Thanks for the info!

[@matijatu]

I'm wondering if there is a reason why the unmount is inside of a separate useEffect. I'm talking about useFetch @ 1:50

[@alecs6326]

Great channel thanks for the awesome content!

[@harishp9686]

Thanks for awesome contents... could you please create a video on setting monorepo with cra and typescript?

[@bawad]

sure

[@harishp9686]

@@bawad also please include redux

[@markovujanic]

Thanks Ben, this is really useful in context explanation.

[@rediculiqi4136]

This was very helpful for me , please make some more of those , with optimization performance topics

[@jamesjohnson5386]

Is there any reason why you put setState in a dependency array for useEffect?

[@bawad]

because if setState changes, I want to use the new value inside useEffect though setState is unlikely to change

[@florian_206]

@@bawad it will not change. "React guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list." reactjs.org/docs/hooks-reference.html#usestate

[@andrewking1173]

Thank you for these!! Needed these for work :D

[@MrDevianceh]

Just wanted to say, i love the hooks series :) Maybe cover creating custom hooks and things like that :)

[@bawad]

Any particular custom hook you'd like to see made?

[@jora5483]

absolutely brain-melting!!

[@dhruvilpatel856]

@Ben Awad, Can we put computeLongestWord function inside useMemo (just above we call it) instead of putting it outside of component? (The point is to avoid passing as dependency)

[@bawad]

> The point is to avoid passing as dependency What do you mean by that? Putting it outside the component would allow you to avoid passing it as a dep

[@dhruvilpatel856]

@@bawad what if in situations where we want to export this component, does putting the function outside of it still work?

[@bawad]

Yeah

[@colloidalsilver177]

This was awesome but where did “arr” come from?

[@bawad]

it's the parameter github.com/benawad/react-hooks-tutorial/blob/4a5200a39a9b06a1df9ee6afd68153a47ed847af/src/App.js#L4

[@BobbyBundlez]

@@bawad lolz

[@ivanbadyulya5562]

What is the extension you use for block context underline?

[@bawad]

I'm actually not sure what is causing that. Here are my settings though benawad.com/plugins

[@tunvirrahman9504]

how to test "ComputeLongestWord"?

[@Isha3006]

Could you please show, How we could use useMemo() with async await

[@bawad]

I wouldn't, I would pick useEffect for that

[@AshishRawat-zl6te]

Really amazing work Man. Just a suggestion- It would be good if u give the link to a code sandbox or codepen.io for the code, which would be really helpful for ur subscribers.

[@stevereid636]

Eslint now complains that computeLongestWord is not a valid dependency in useMemo when employing your recommended solution of relocating the function outside?

[@bawad]

does eslint want you to do: useMemo(() => computeLongestWord(data), [data, computeLongestWord])

[@stevereid636]

@@bawad Not when computeLongestWord is located outside the App. It does like it being a dependency of useMemo when it's outside

[@stevereid636]

@@bawad Here's the message: function computeLongestWord(arr: any): string | any[] React Hook useMemo has an unnecessary dependency: 'computeLongestWord'. Either exclude it or remove the dependency array. Outer scope values like 'computeLongestWord' aren't valid dependencies because mutating them doesn't re-render the component.eslint(react-hooks/exhaustive-deps)

[@bawad]

oh, just remove computeLongestWord from the dep list useMemo(() => computeLongestWord(data), [data])

[@stevereid636]

@@bawad It's just that you say in the video that computeLongestWord should be in the dep list?

[@alocer1]

.json url was dead. found another copy here raw.githubusercontent.com/ajzbc/kanye.rest/quotes/quotes.json

[@trungnguyen5947]

Another way to find the longest word: function computeLongestWord(data) { if (!data) { return []; } const longestWord = JSON.parse(data) .map((sentence) => sentence.split(' ')) .reduce((prevValue, currValue) => [...prevValue, ...currValue]) .reduce((longest, curr) => (curr.length > longest.length ? curr : longest)); return longestWord; }

[@__greg__]

Very helpful, thanks!

[@costeachitorog5322]

thanks man

[@stealthysubie]

You're the best man!

[@alexey9796]

Thanks, but you should return an empty string not an empty array

[@bawad]

Why

[@alexey9796]

Ben Awad I was texting about the computeLongestWord function. Why the positive results is a string, but if there isn’t data - it’s an array? I see types inconsistency in this case

[@bawad]

oh I see, yeah idk why I did that your right empty string makes more sense

[@touradhadrami6530]

[@vipulchodankar62]

Nice.

[@lardosian]

Kanye Rest lol!!!

[@PouyaAtaei]

Hey mate, great material. But just slow down, chill, and explain in good harmony. I can see that you're definitely a good practitioner, but when it comes to teaching, well, it's far away from getting there.... a good example of a coding teacher can be Stephen Grider on Udemy... typing so fast and going through things so quickly doesn't make it cool, it just makes it stressful.

[@bawad]

Thanks for the feedback

[@ElTopoYoutuber]

&