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
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 :)
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 }
@@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 !!!
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
@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)
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.
@@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
Eslint now complains that computeLongestWord is not a valid dependency in useMemo when employing your recommended solution of relocating the function outside?
@@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)
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
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.
![[ ออกกอง ] วัยหนุ่ม 2544 โลกหลังลูกกรง..ทัวร์กองถ่ายหนังใน "คุกของจริง" | JUSTดูIT.](http://i.ytimg.com/vi/vB--aOkZCpw/mqdefault.jpg)
Clearly spoken, well structured, to the point, no umming and arring... These videos are fantastic.
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
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
You are not alone
Amazing tutorial on useMomo hook. Thanks for this Ben.
wow this is extremely helpful, thank you my inner coding god
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 :)
@Trent Miles yup, I have been watching on InstaFlixxer for months myself :)
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.
You are awesome, thanks for making these types of videos!
I love this hooks series. Thanks for the videos !
You're awesome! This is one of the best react channels on youtube
Thank you!
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
}
It can get even easier with Array.find ;)
this is not algorithm channel :P ofcourse there's different ways to do that
Straight to the point. Great video Ben!
Thanks for awesome contents... could you please create a video on setting monorepo with cra and typescript?
sure
@@bawad also please include redux
great video!!! explains a lot about both useCallback AND useMemo !!!
So basically useMemo is using to execute a function when a change value of its given dependency, thats amazing !
absolutely brain-melting!!
Great video!
Quick Question: Isn't this same as calling computeLongestWord inside useEffect and setting longestword with useState?
kind of, that would cause a rerender though
@@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
yeah they would have similar behavior but calling the setter in useEffect would cause another render
@@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 !!!
.json url was dead. found another copy here raw.githubusercontent.com/ajzbc/kanye.rest/quotes/quotes.json
This was very helpful for me , please make some more of those , with optimization performance topics
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
Great channel thanks for the awesome content!
Thanks Ben, this is really useful in context explanation.
I'm wondering if there is a reason why the unmount is inside of a separate useEffect. I'm talking about useFetch @ 1:50
Nice, bro. Like the way you code. Thanks for the info!
Just wanted to say, i love the hooks series :) Maybe cover creating custom hooks and things like that :)
Any particular custom hook you'd like to see made?
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;
}
@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)
> 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
@@bawad what if in situations where we want to export this component, does putting the function outside of it still work?
Yeah
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.
Is there any reason why you put setState in a dependency array for useEffect?
because if setState changes, I want to use the new value inside useEffect
though setState is unlikely to change
@@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
Thank you for these!! Needed these for work :D
This was awesome but where did “arr” come from?
it's the parameter github.com/benawad/react-hooks-tutorial/blob/4a5200a39a9b06a1df9ee6afd68153a47ed847af/src/App.js#L4
@@bawad lolz
thanks man
Very helpful, thanks!
Could you please show, How we could use useMemo() with async await
I wouldn't, I would pick useEffect for that
What is the extension you use for block context underline?
I'm actually not sure what is causing that. Here are my settings though benawad.com/plugins
how to test "ComputeLongestWord"?
Eslint now complains that computeLongestWord is not a valid dependency in useMemo when employing your recommended solution of relocating the function outside?
does eslint want you to do: useMemo(() => computeLongestWord(data), [data, computeLongestWord])
@@bawad Not when computeLongestWord is located outside the App. It does like it being a dependency of useMemo when it's outside
@@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)
oh, just remove computeLongestWord from the dep list
useMemo(() => computeLongestWord(data), [data])
@@bawad It's just that you say in the video that computeLongestWord should be in the dep list?
Thanks, but you should return an empty string not an empty array
Why
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
oh I see, yeah idk why I did that
your right empty string makes more sense
You're the best man!
Nice.
Kanye Rest lol!!!
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.
Thanks for the feedback
&