DEV Community

Cover image for Correctly handling async/await in React components

Correctly handling async/await in React components

Alexandru-Dan Pop on April 05, 2020

Context There have been tweets lately stating that async/await does not work well with React components, unless there is a certain amoun...
Collapse
 
zeeshan4242 profile image
Zeeshan

Thanks Alex. I was struggling with memory-leak issues. It really helped!

Collapse
 
alexandrudanpop profile image
Alexandru-Dan Pop

Glad to hear that!

Collapse
 
fefitin profile image
Fe

Very interesting, I hadn’t come across those issues until I read your post. Quick question: why are you using a ref instead of a regular state var in your first fix? Thanks!

Collapse
 
alexandrudanpop profile image
Alexandru-Dan Pop

By state var you mean having a setState({isUnmounted:true}) in the cleanup function of the first useEffect?

Don't think that will work, it might complain with the same: Cannot setState on unmounted warning. It seems refs are kept around even after Component unmounts, that's why they work in this case.

The React docs are a bit confusing, because they state refs live the same lifetime as components but obviously they stick around at least for as long as your async code still runs.

Collapse
 
fefitin profile image
Fe

Great, that's good to know, thanks!

Collapse
 
monfernape profile image
Usman Khalil • Edited

This is gold Alex. I've been on React for an year now and it's very helpful

Collapse
 
alexandrudanpop profile image
Alexandru-Dan Pop

Thank you!

Collapse
 
performautodev profile image
performautodev

You are awesome !

Collapse
 
mousticke profile image
Akim B. (mousticke.eth)

Nice post. It's really helpful.
I'm just starting to learn the hooks system.
I know I can just google it but why would you use ref instead of state for componentIsMounted ? What is the purpose ?

Collapse
 
jamesthomson profile image
James Thomson

Ref's don't cause the component to re-render so you can update the value without side effects - in this case, the side effect being an unwanted state update (due to the resolving async call) that occurs after the component has actually been in an unmounted.

Collapse
 
sandeep194920 profile image
Sandeep194920

Really like the content here, good work! May I ask which theme you're using for the code? I'm using vscode and tried searching for such a theme but couldn't find one. Can you please let me know?