Очистка ресурсов

В Atomico управление жизненным циклом компонентов играет ключевую роль для поддержания производительности и предотвращения утечек памяти. Одним из важнейших аспектов является очистка ресурсов, которая осуществляется через встроенные механизмы библиотеки.

Хук useEffect и очистка

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

import { component, useEffect } from "atomico";

function Timer() {
    let intervalId;

    useEffect(() => {
        intervalId = setInterval(() => {
            console.log("Тик");
        }, 1000);

        return () => {
            clearInterval(intervalId);
            console.log("Таймер остановлен");
        };
    }, []);

    return <host>Секундомер запущен</host>;
}

export default component(Timer);

Ключевые моменты:

  • Функция, возвращаемая из useEffect, выполняется при размонтировании компонента.
  • Очистка выполняется до следующего запуска эффекта, если указаны зависимости.
  • Позволяет безопасно освобождать таймеры, подписки, WebSocket-соединения и другие ресурсы.

Подписки и события

В Atomico часто используются DOM-события или подписки на внешние источники данных. Любое подключение должно иметь соответствующую функцию очистки:

useEffect(() => {
    function onResize() {
        console.log("Размер окна изменился");
    }

    window.addEventListener("resize", onResize);

    return () => {
        window.removeEventListener("resize", onResize);
    };
}, []);
  • Добавление слушателей без последующей очистки приводит к утечкам памяти.
  • Возврат функции очистки гарантирует корректное удаление обработчиков при размонтировании.

Работа с асинхронными ресурсами

Асинхронные операции требуют аккуратной обработки. Для промисов и fetch-запросов рекомендуется использовать флаг отмены:

useEffect(() => {
    let canceled = false;

    fetch("/api/data")
        .then(res => res.json())
        .then(data => {
            if (!canceled) console.log(data);
        });

    return () => {
        canceled = true;
    };
}, []);
  • Переменная canceled предотвращает обновление состояния после размонтирования.
  • Позволяет избежать ошибок типа setState on unmounted component.

Использование useRef для хранения ресурсов

Для объектов, которые нужно очищать вручную (например, WebSocket, AudioContext), удобно использовать useRef:

import { component, useEffect, useRef } from "atomico";

function AudioPlayer() {
    const audioRef = useRef();

    useEffect(() => {
        audioRef.current = new Audio("sound.mp3");
        audioRef.current.play();

        return () => {
            audioRef.current.pause();
            audioRef.current.src = "";
            audioRef.current = null;
        };
    }, []);

    return <host>Воспроизведение аудио</host>;
}

export default component(AudioPlayer);
  • useRef сохраняет объект между рендерами без повторного создания.
  • Очистка ресурсов через ref.current гарантирует отсутствие зависаний и утечек памяти.

Комплексная очистка нескольких ресурсов

В компонентах с несколькими эффектами важно структурировать очистку, чтобы не оставалось незакрытых ресурсов:

useEffect(() => {
    const timerId = setInterval(() => console.log("Тик"), 1000);
    const socket = new WebSocket("wss://example.com");

    socket.addEventListener("message", (event) => console.log(event.data));

    return () => {
        clearInterval(timerId);
        socket.close();
    };
}, []);
  • Все ресурсы объединяются в одну функцию очистки для надежного управления.
  • Atomico гарантирует вызов этой функции при размонтировании компонента.

Рекомендации по практике

  1. Всегда возвращать функцию очистки из useEffect при работе с побочными эффектами.
  2. Использовать useRef для хранения объектов с длительным жизненным циклом, чтобы избежать повторного создания.
  3. Не оставлять подписки на внешние события без удаления, даже если компонент временно не отображается.
  4. Асинхронные операции должны проверять состояние компонента, чтобы предотвратить ошибки и утечки памяти.

Очистка ресурсов в Atomico — это комбинация хуков, возврата функций очистки и аккуратного управления объектами, которые живут дольше одного рендера. Системный подход к этим практикам обеспечивает стабильность, высокую производительность и предотвращение ошибок, связанных с памятью и побочными эффектами.

Оглавление