🤔 Как отследить демонтирование функционального компонента?

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

🚩Использование `useEffect` для отслеживания демонтирования

Хук useEffect позволяет выполнять побочные эффекты в функциональных компонентах. Функция очистки, возвращаемая из useEffect, выполняется при демонтировании компонента.

import React, { useEffect } from 'react';

const MyComponent = () => {
    useEffect(() => {
        console.log('Component mounted');

        // Функция очистки вызывается при демонтировании компонента
        return () => {
            console.log('Component will unmount');
        };
    }, []); // Пустой массив зависимостей означает, что эффект выполнится только при монтировании и демонтировании

    return (
        <div>
            <p>My Component</p>
        </div>
    );
};

export default MyComponent;

Хук useEffect

   useEffect(() => {
       console.log('Component mounted');

       return () => {
           console.log('Component will unmount');
       };
   }, []);
   

🚩Пример с реальным использованием

import React, { useEffect, useState } from 'react';

const WebSocketComponent = () => {
    const [messages, setMessages] = useState([]);

    useEffect(() => {
        const socket = new WebSocket('ws://example.com/socket');

        socket.onmessage = (event) => {
            setMessages((prevMessages) => [...prevMessages, event.data]);
        };

        console.log('WebSocket connection opened');

        return () => {
            socket.close();
            console.log('WebSocket connection closed');
        };
    }, []);

    return (
        <div>
            <h1>WebSocket Messages</h1>
            <ul>
                {messages.map((message, index) => (
                    <li key={index}>{message}</li>
                ))}
            </ul>
        </div>
    );
};

export default WebSocketComponent;

Открытие WebSocket соединения

const socket = new WebSocket('ws://example.com/socket');   

Обработка входящих сообщений

   socket.onmessage = (event) => {
       setMessages((prevMessages) => [...prevMessages, event.data]);
   };
   

Закрытие WebSocket соединения при демонтировании

   return () => {
       socket.close();
       console.log('WebSocket connection closed');
   };
   

Ставь 👍 и забирай 📚 Базу знаний