Stop useEffect React Hook re-render multiple times with Async call - Tutorial - useEffect cleanup.

❗️Today I share a quick trick on how to stop unwanted responses from re-rendering a react component whose useEffect has an async function.
TLDR; Use useEffect cleanup. See the code here 👉 gist.github.com/dylan-alberta...
I ran across this problem when making an API call when a component rerendered.
---
WHO AM I: I'm Dylan, a Cloud Engineer living in Bend, Oregon. I use my background in AWS and React to make videos that enable and grow businesses.
---
🌍 My website / blog -
dylanalbertazzi.com/

[@maXXik1337]

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.

[@dylanalbertazzi]

That's what I'm here for :)

[@andremelo3857]

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.

[@dylanalbertazzi]

Excellent!

[@farid9323]

Such a simple solution. Love it! I had to move "isCanceled" to outside the useEffect hook because I had strict mode enabled.

[@kikevanegazz325]

Kudos, Dylan. I tried out your code and it worked just fine. Thanks a lot.

[@dylanalbertazzi]

I'm so glad it helped!

[@matthewbeardsley7004]

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!

[@ericpaul4672]

Quick n concise love the videos !

[@dylanalbertazzi]

Glad to hear it!

[@raqha4575]

It fixed the doubled "mounting" but now i want to call a function when i unmount... how can i call this only once?

[@fosimuboolubo8891]

Thanks for making this simple to grab.

[@dylanalbertazzi]

You bet!

[@vivianadavila3051]

This was so helpful, thanks!!

[@dylanalbertazzi]

Glad it was helpful!

[@lacascadaobregon]

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

[@dylanalbertazzi]

Always appreciate the input!

[@Popc1007]

Thank for explaining so well ,

[@j_kimotti8350]

This helps a lot! Thank you!

[@dylanalbertazzi]

Glad to hear it!

[@IvoTsochev]

great example mate 👍

[@DevOpsDirective]

"Ohhhhh... Why are we getting red dots?!" I feel that one 😂

[@dylanalbertazzi]

Good to hear from ya, it's been a blast watching your channel grow!

[@bananas_5856]

Shit man youre giving the answer on my problem that ive been struggling within hours, great video... thanks

[@RizaHariati]

Thank you! very useful...

[@dylanalbertazzi]

You are welcome!

[@rohit87]

Awesome. More videos on reactJs ... 🎊

[@dylanalbertazzi]

More to come!

[@serioussemih]

This helped me a lot

[@dylanalbertazzi]

I'm glad it was helpful!

[@imammahadi352]

You can use useDebounce hook instead all of these stuff.

[@dylanalbertazzi]

You're right. The useDebounce custom hook uses the useEffect cleanup function too.

[@hasanbiyik01]

I guess important thing in here is to knowing scope chain and closure.

[@worldclasscode1847]

Great video! :)

[@dylanalbertazzi]

Glad it helped!

[@mohhamadtoosi8128]

That's great. Thanks a lot.

[@dylanalbertazzi]

Glad to help!

[@thanhngo-ng3ci]

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 ?

[@dylanalbertazzi]

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.

[@Sam-hu3xt]

@@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.

[@huynguyenquoc3692]

Could u tell me the name of vscode theme, plz

[@dylanalbertazzi]

One Dark Pro! And my terminal is custom editing my .bashrc script

[@ppgg997]

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

[@Sv-ry9lj]

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

[@jasonjasonjasonjasonjason]

I hope you have a great day 😊

[@dylanalbertazzi]

I did, thanks. Right back at ya!

[@akshayshinde2403]

It's more like debouncing.

[@boot-strapper]

Look at that, there ARE other engineers in Bend OR

[@dylanalbertazzi]

I've been waiting for this day!

[@PutlerXLO]

and this is an antipattern...

[@Rulito2405]

Do you care to explain why it's an antipattern?

[@PutlerXLO]

@@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.

[@rodrigovazquez1954]

This is called "race condition" right?