Как происходит размонтирование компонента?

Размонтирование компонента в React — это процесс удаления компонента из виртуального DOM и, в конечном итоге, из реального DOM. Это может происходить по разным причинам, таким как изменение состояния родительского компонента, что приводит к изменению его рендеринга, или при условной отрисовке компонентов.

В классовых компонентах есть специальный метод жизненного цикла componentWillUnmount, который вызывается перед размонтированием компонента. Это место, где вы можете выполнять очистку, например, отменять подписки или очищать таймеры:

class MyComponent extends React.Component {
 	componentWillUnmount() {
   		// Очищаем таймер
   		clearTimeout(this.timer);
	 }

 	render() {
   		return <div>Hello!</div>;
	 }
}

 В функциональных компонентах используется хук useEffect, который может возвращать функцию очистки. Эта функция будет вызвана при размонтировании компонента:

import React, { useEffect } from 'react';

function MyComponent() {
 	useEffect(() => {
   		const timer = setTimeout(() => {
     			console.log('Timer executed');
   		}, 1000);

   		// Функция очистки
   		return () => clearTimeout(timer);
 	}, []);

 	return <div>Hello!</div>;
}

В этом примере таймер очищается, когда компонент размонтируется, предотвращая утечку памяти. Таким образом, размонтирование компонентов в React важно для управления ресурсами и обеспечения их эффективного использования.