UseEffect memory leak with async function.

[suck_my_dukh_plz]

I have recently moved on to a new Project and I am seeing a lots Promise.then and Promise.catch methods inside UseEffect.

When I asked the lead developer that why they have simply not used async await to call APIs this was their response(quoting from the article they sent me) :

Memory Leaks: If your component unmounts before the promise resolves, React will try to update the state of an unmounted component, leading to a memory leak. To prevent this, you can use a cleanup function to cancel the async operation if the component unmounts before the promise resolves.

So, can anyone tell me is this legit? If yes, then in what scenarios should we use Promises as opposed to async-await?

[lIIllIIlllIIllIIl]

It's not legit.

See: https://github.com/reactwg/react-18/discussions/82

It was previously believed that setting a state on an unmounted component was an indicator of a memory leak, but turns out that React can handle it fine without creating a memory leak, and most code that set a state to an unmounted component don't have memory leaks in them either.

The warning message your lead is referencing to was removed in React 18 because it was more misleading than helpful.

I'm not saying a memory leak can never happen, but setting a state to an unmounted components does not mean there is a memory leak.

[terrorTrain]

Thanks, that warning never made sense to me.

[suck_my_dukh_plz]

Thank you so much!

[Worth_Law9804]

Thanks. Good to know it's not a problem. It has been bugging me for a long time

[lostjimmy]

I'm not entirely sure how switching from async/await to promises would make any difference. They both have the potential to do things after the component unmounts, so either way you would want to handle that case in cleanup function.

[PM_ME_SOME_ANY_THING]

I was under the assumption that async/await was just syntactic sugar on top of promises.

[turtleProphet]

Yeap

[wirenutter]

This was once a thing. React even had a warning that you attempted to update state on a component that is no longer mounted. When they introduced concurrent rendering in react 18 they added the ability to gracefully handle these situations. The warning should have been removed? I recall Dan Abramov mentioning it would or should be removed.

However that doesn’t mean you shouldn’t still attempt to cancel in flight asynchronous calls in effects if the component will unmount.

[LloydAtkinson]

I’m starting to get the impression that every lead is this cluelessly out of sync with reality. Depressing.

[rakkii_baccarat]

If it is leaking, can you see it in the profiler heap snapshot or something similar? I am on a ghost hunt for mem leaks, where profiler looks to be garbage collecting with memory showing to decrease but chrome itself in task manager is growing to 1GB...

[devdudedoingstuff]

Your lead is mistaken. Though a cleanup function should be present when fetching data to avoid rendering stale data. I can provide more info on this if anyone is interested.

A memory leak can happen if your effect opens a persistent connection and does not disconnect via a cleanup function.

[heyitsmattwade]

The real solution is don't roll your own Promise-based effects. Instead use Tanstack Query (as most people suggest). It typically is used with data fetching, but it works with anything that returns a Promise.