Как исправить ошибку "Warning: Can't perform a React state update on an unmounted component"

Как исправить ошибку "Warning: Can't perform a React state update on an unmounted component"

Ошибка "Warning: Can't perform a React state update on an unmounted component" в React указывает на то, что приложение пытается обновить состояние компонента, который уже был удалён из DOM. Это может привести к утечкам памяти и неожиданным ошибкам в работе приложения. В этой статье мы разберём, почему возникает эта ошибка, что значит для компонента быть размонтированным, и как избежать этой проблемы.

Что значит размонтирование компонента?

В React компонент считается "размонтированным" в тот момент, когда он больше не отображается на странице и был удалён из DOM. Обычно это происходит при изменении состояния (state) или маршрута (route). Изменение состояния может включать, к примеру, обновление списка отображаемых элементов, при котором компоненты добавляются или удаляются. Изменение маршрута, например, при использовании React Router, вызывает замену отображаемых страниц или частей интерфейса, в результате чего компоненты текущей страницы удаляются, а компоненты новой страницы добавляются в DOM. При этом попытка обновить состояние компонента, который был удалён, вызовет ошибку, так как React больше не отслеживает его и не ожидает новых данных.

Почему происходит попытка обновления состояния размонтированного компонента?

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

Основные причины ошибки

  • Асинхронные запросы: Долгие операции, такие как запросы на сервер, которые могут завершиться после удаления компонента.
  • Работа с промисами: Обработка промисов в useEffect или других частях приложения без отслеживания статуса компонента может привести к проблемам.

Для устранения этой ошибки нужно отслеживать состояние компонента перед попыткой обновления. Рассмотрим несколько подходов к решению этой задачи.

Использование флага для отслеживания статуса компонента

Простой способ избежать данной ошибки — создать флаг, который будет отслеживать, активен компонент или уже размонтирован. Если компонент был удалён, флаг запретит обновление его состояния.

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true;

    async function fetchData() {
      const response = await fetch('/api/data');
      const result = await response.json();
      if (isMounted) {
        setData(result);
      }
    }

    fetchData();

    return () => {
      isMounted = false;
    };
  }, []);

  return <div>{data ? JSON.stringify(data) : 'Загрузка данных...'}</div>;
}

Здесь переменная isMounted устанавливается в false при удалении компонента, что предотвращает вызов setData для компонента, уже удалённого из DOM.

Как работает функция очистки в useEffect

React вызывает функцию очистки, возвращаемую из useEffect, только в двух случаях:

  • Перед повторным запуском эффекта, если зависимости изменились.
  • Когда компонент размонтируется, если эффект был установлен один раз при монтировании (например, при пустом массиве зависимостей []).

В этом примере мы используем пустой массив зависимостей, поэтому эффект выполняется только при монтировании, а функция очистки выполняется при удалении компонента из DOM. Это гарантирует, что флаг isMounted будет установлен в false в момент, когда компонент размонтирован.

Отмена асинхронных операций с использованием библиотек

Другой способ контролировать асинхронные операции — это использовать библиотеки, поддерживающие отмену запросов. Например, при работе с Axios можно использовать CancelToken, который позволяет отменить запрос, если компонент был размонтирован до его завершения. Давайте разберём, как это работает на практике:

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const source = axios.CancelToken.source();

    axios.get('/api/data', { cancelToken: source.token })
      .then(response => setData(response.data))
      .catch(error => {
        if (axios.isCancel(error)) {
          console.log('Запрос отменён:', error.message);
        } else {
          console.error('Ошибка:', error);
        }
      });

    return () => {
      source.cancel('Компонент был удалён');
    };
  }, []);

  return <div>{data ? JSON.stringify(data) : 'Загрузка данных...'}</div>;
}

Использование React Query для управления запросами

React Query — это библиотека для удобного управления асинхронными операциями и оптимизации запросов. Она предоставляет встроенные механизмы отмены и повторного запроса данных, что предотвращает ненужные обновления состояния размонтированных компонентов. React Query автоматически отслеживает статус запроса и удаление компонента.

Пример использования React Query

В React Query, вместо того чтобы вручную следить за состоянием монтирования, достаточно использовать useQuery:

import React from 'react';
import { useQuery } from 'react-query';
import axios from 'axios';

function DataFetcher() {
  const { data, error, isLoading } = useQuery('fetchData', async () => {
    const response = await axios.get('/api/data');
    return response.data;
  });

  if (isLoading) return <div>Загрузка данных...</div>;
  if (error) return <div>Произошла ошибка: {error.message}</div>;

  return <div>{JSON.stringify(data)}</div>;
}

Здесь useQuery автоматически обрабатывает процесс запроса и его отмену, если компонент размонтируется до завершения запроса. Это делает код более чистым и минимизирует риск появления ошибки обновления состояния у размонтированных компонентов.

Для более детального изучения React Query, а также других функций, таких как invalidateQueries, рекомендуется ознакомиться со статьёй "Как правильно использовать useMutation и invalidateQueries в React Query для актуализации данных".

Заключение

Ошибка "Can't perform a React state update on an unmounted component" возникает из-за попыток обновления состояния, когда компонент уже был удалён из DOM. Решить эту проблему можно, используя флаги для отслеживания состояния компонента, отмену запросов при помощи Axios и других библиотек, а также специализированные инструменты для работы с запросами, такие как React Query. Эти методы помогут устранить предупреждения и сделать приложение более надёжным.

14.01.2024 в рубрике Wiki