Why does not using a cleanup function in useEffects cause memory leaks?

I was really stumped on this. So my colleagues sent me an article. And replied to some of my questions. So let's check out 

Now I just need someone who knows how to read. Now, if only I could read... 

Okay so this article talks about the useEffect hook. That's great - good start. "When I was learning the functionality of this hook, I could not understand the reason to use the return in this function."

But with time and with the life cycle of components the author realised that: "It is important to use the return in the hook useEffect, especially in the side effects." Um what... hmmm?

What are the side effects?

• Fetching data from a remote server
• Reading or writing to local storage
• Setting up event listeners 
• Setting up a subscription (???!)
• These can happen when
• A button is clicked
• A form is submitted
• A component is mounted or unmounted (and so on... etc.). 

And why clean them up? 

When a side effect completes and attempts to update the state of an already disassembled component, it causes a react warning about a memory leak. Memory leaks (see below) can cause

• Affecting the performance of a project by reducing the memory available 
• Slowing down applications
• Crashing the system

So, it's good to avoid memory leak problems...

What is a memory leak?

I had to ask chat gpt for this as no one was really specifying what it was.

A memory leak is memory that your program allocates (reserves), but never releases, even though it's no longer needed. Makes sense. So it uses up memory that we don't need to use up. Over time, these forgotten allocations can pile up, reducing your available memory, or slowing an crashing your app. Okay makes sense. Thank you 

What my colleague said

One colleague linked me to a really helpful article. The other one gave me a really helpful reply. I want to break down what she said here: 

"hey Susanna, it's because when the component unmounts, the interval may continue to run still referencing the old state.

This happens with timeouts because they execute the function with a delay. 

So if the component unmounts before the scheduled execution, this will happen anyway without a clean up (which forces the execution of the time out to stop." Sorry, I don't get this. I have to read this one more time please. Thank you

Paraphrased by ChatGPT 

Timers persist beyond unmount - setInterval and setTimeout both schedule code to run in the future. If you don't cancel them, they'll still call your callback even after your component is gone. 

This callback may reference variables or state that no longer exist, so the cleanup is essential 

You may get warnings or memory leaks if you don't clean up

More on Clean Ups

In React function components, the cleanup function is what is RETURNED by the USE EFFECT

So you need to call clearInterval for intervals and clearTimeout for timeouts. To stop them from unmounting (?)

"What basically happens is that you set a timer inside of your component, react unmounts that component from the dom, and then because you never cancelled that timer, it still fires."

Got it now

Going through my colleague's message one more time

"It's because when the component unmounts, the interval may continue to run still referencing the old state." Gotcha, so you set an interval or a timeout and it continue to run - even long after the component has been unmounted. "This happens with timeouts because they execute the function with a delay." Got it, so they keep on executing the function.

***

Source article: this link