I am glad that you slowly show the flow of the code as it "bubbles" through. I press D this starts, it goes here, than jumps there, then there etc. Well done.
Nice video, not sure it's my problem, but I learnt something none-the-less...had no idea the cleanup gets called the next time the useEffect is called, thanks!
Great video man. Keep making videos! Maybe make into oh who you are and what you do much shorter. Then jump right into the problem statement, why it’s a problem, where it’s applicable, and then jump directly into the solution
Just checking the flag won't have any effect on performance. However you can do more compute intensive operations inside a useEffect that you do need to be aware of performance for.
@@dylanalbertazzi in your example you should use useRef to capture the reference of the timer and invalidate it with clearTimeout. The result is more concise.
I thought that useffect wouldn't keep the isCancelled variable on return() and that it would re-initialise it on 2nd call again (as would happen on topical variable on a normal function 2nd call) from the beggining, thanks to showing me how begginer i am on React:P
Actually it will reinitialise on the 2nd time the useEffect runs. It is all due to closure where the handlechange function points to isCancelled which is modified by the return function of useEffect, so its all happening within the useEffect function of the nth time
@@Rulito2405 if it is not clear, read about "React isMounted antipattern" that has been known for more than 7 years. As a result, the React maintainers decided to remove this warning in the new version, as most users do it wrong and pointless for years.
I am glad that you slowly show the flow of the code as it "bubbles" through. I press D this starts, it goes here, than jumps there, then there etc. Well done.
That's what I'm here for :)
I'm facing this problem in a project where I'm working. I couldn't solve this, but I finally understand how the clean up works. Thank you mate.
Excellent!
Such a simple solution. Love it! I had to move "isCanceled" to outside the useEffect hook because I had strict mode enabled.
Nice video, not sure it's my problem, but I learnt something none-the-less...had no idea the cleanup gets called the next time the useEffect is called, thanks!
Kudos, Dylan. I tried out your code and it worked just fine. Thanks a lot.
I'm so glad it helped!
It fixed the doubled "mounting" but now i want to call a function when i unmount... how can i call this only once?
Quick n concise love the videos !
Glad to hear it!
"Ohhhhh... Why are we getting red dots?!"
I feel that one 😂
Good to hear from ya, it's been a blast watching your channel grow!
Great video man. Keep making videos! Maybe make into oh who you are and what you do much shorter. Then jump right into the problem statement, why it’s a problem, where it’s applicable, and then jump directly into the solution
Always appreciate the input!
great example mate 👍
Shit man youre giving the answer on my problem that ive been struggling within hours, great video... thanks
Thanks for making this simple to grab.
You bet!
Awesome. More videos on reactJs ... 🎊
More to come!
Thank for explaining so well ,
useEffect still runs every time we type, we just don't call the alert base on a flag, does it have any problem with performance ?
Just checking the flag won't have any effect on performance.
However you can do more compute intensive operations inside a useEffect that you do need to be aware of performance for.
@@dylanalbertazzi in your example you should use useRef to capture the reference of the timer and invalidate it with clearTimeout. The result is more concise.
This helps a lot! Thank you!
Glad to hear it!
You can use useDebounce hook instead all of these stuff.
You're right.
The useDebounce custom hook uses the useEffect cleanup function too.
This was so helpful, thanks!!
Glad it was helpful!
Great video! :)
Glad it helped!
I guess important thing in here is to knowing scope chain and closure.
Could u tell me the name of vscode theme, plz
One Dark Pro!
And my terminal is custom editing my .bashrc script
This helped me a lot
I'm glad it was helpful!
Thank you! very useful...
You are welcome!
That's great. Thanks a lot.
Glad to help!
I hope you have a great day 😊
I did, thanks. Right back at ya!
I thought that useffect wouldn't keep the isCancelled variable on return() and that it would re-initialise it on 2nd call again (as would happen on topical variable on a normal function 2nd call) from the beggining, thanks to showing me how begginer i am on React:P
Actually it will reinitialise on the 2nd time the useEffect runs. It is all due to closure where the handlechange function points to isCancelled which is modified by the return function of useEffect, so its all happening within the useEffect function of the nth time
It's more like debouncing.
Look at that, there ARE other engineers in Bend OR
I've been waiting for this day!
and this is an antipattern...
Do you care to explain why it's an antipattern?
@@Rulito2405 if it is not clear, read about "React isMounted antipattern" that has been known for more than 7 years. As a result, the React maintainers decided to remove this warning in the new version, as most users do it wrong and pointless for years.
This is called "race condition" right?