How to understand it?

Question

React

Hello developers. Please help me understand the following lines from the React documentation:

"Add lifecycle methods to the class
In applications with many components, it is very important to release used system resources when components are removed.

The initial rendering of a component in the DOM is called "mounting" (mounting). We need to set a timer every time this happens.

Every time a DOM node created by a component is removed, "unmounting" occurs. To avoid resource leaks, we will reset the timer every time "unmounting."

This is from the topic "State and Life Cycle", I can not understand what system resources are in question, what kind of system resource leak? I will be very grateful for the answer.

Answer 1

Let's say you have a component that, when it appears on the page (mounted), adds a global event listener, for example - mousemove. The application works, everything is fine, but then, for some reason, it unmounts and after a while it mounts again. In this case, if you do not remove the wiretapping, there will already be 2 events, which is a memory leak.
It also happens with timers and intervals, so you need to cancel them when unmounting.
As an example, I advise you to watch this video.