ReactJS. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memo

Доброго времени суток, Хабр!

Все reactjs разработчики, кто имеет дело с интерактивностью между бэком и фронтом рано или поздно встречаются, или встречались, или встретятся со следующей ошибкой:


Если дословно, то получится так:

Предупреждение. Невозможно выполнить обновление состояния React для неустановленного компонента. Это не операция, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в функции очистки useEffect.

На самом деле все достаточно просто, нужно всего лишь обратить внимание на следующие словосочетания:

1. Невозможно выполнить обновление состояния
2. неустановленного компонента;
3. отмените все подписки и асинхронные задачи
4. очистки useEffect

В основе хуки. GO в под кат!

Итак:

1. Все reactjs программисты знают что такое состояние (state) и что такое обновление(setState) тоже. Я не буду этом.
2. Неустановленный компонент. Учитывая контекст ошибки первое что приходит на ум:
   1) компонент которого нет;
   2) компонент который мы не импортировали;
   3) компонент который размонтировался;
   Наш случай — 3 пункт. Без комментарий.
   
3. Подписки и асинхронные задачи. То есть функции которые что-то выполняют, например: изменяют состояние. Что касаемо асинхронных задач, то тут сразу на ум бросается async/await — это наш способ общения с бэком в побочном эффекте.
4. Очистка useEffect. Я думаю все знают что такое return () => {} в useEffect. Таким образом, мы можем произвести какие-либо действия в возвращаемой функции эффекта при размонтировании компонента, например: запретить изменять состояние.

Воспроизведем ошибку:

Допустим, мы разрабатываем сайт с подгрузкой описания фильмов (не будем углубляться в API moviedb, а возьмем за основу конкретный фильм). У нас есть две странички:

Ссылки на обе странички доступны в навигационной панели, например в header. На главной страничке («Домой») происходит общение с бэком для подгрузки информации о фильме.

/src/Pages/HomePage.js

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

import { MOVIE_DB_GET } from '../config';

const HomePage = () => {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(MOVIE_DB_GET);
        const result = await response.json();
        console.log(result, 'result')
      } catch (e) {
        console.error(e.message)
      }
    };

    // Произведем get-запрос на информацию о конкретном фильме
    fetchData();
  }, []);

  return (
    <main>
      <h2>Главная страница</h2>
    </main>
  )
};

export default HomePage;

/src/Pages/AboutPage.js

import React from 'react';

const AboutPage = () => {
  return (
    <main>
      <h2>О нас</h2>
      <p>
         Некий контент      
      </p>
    </main>
  )
};

export default AboutPage;

Для отображения информации посредством запроса необходимо записать информацию в состояние для последующего рендера:

/src/Pages/HomePage.js

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

import { MOVIE_DB_GET } from '../config';

const HomePage = () => {
  // movie - react-состояние;
  // setMovie - функция обновления react-состояния
  const [ movie, setMovie ] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(MOVIE_DB_GET);
        const result = await response.json();
        console.log(result, 'result');
        setMovie(result);
      } catch (e) {
        console.error(e.message)
      }
    };

    // Произведем запрос на информацию о конкретном фильме
    fetchData();
  }, []);

  // descriptionMovie - некая функция, возвращающая view, то есть рендерит информацию о фильме посредством состояния movie

  return (
    <main>
      <h2>Главная страница</h2>
      <p>Описание фильма</p>

      {
        movie ? descriptionMovie() : false
      }
    </main>
  )
};

export default HomePage;

Воспроизведем ошибку следующим путем — переключимся с одного маршрута на другой, то есть находясь на страничке “О нас”, мы перейдем на страничку “Домой” и незамедлительно вернемся снова на страничку “О нас” и вуаля “Can’t perform …..”.

Дело в том, что на запросы сервер не отвечает мгновенно, используется асинхронность, чтобы все таки воспроизвести запрос параллельно необходимым задачам. Но в случае быстрого возврата на страничку “О нас”, компонент “Домой” размонтируется, а значит состояние для данного компонента сброситься, но асинхронность запроса все же запустит setMovie, которого больше нет и выкинет ошибку. Оптимальным решением является запретить использовать обновление состояния при размонтировании компонента:

/src/Pages/HomePage.js

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

import { MOVIE_DB_GET } from '../config';

const HomePage = () => {
  // movie - react-состояние;
  // setMovie - функция обновления react-состояния
  const [ movie, setMovie ] = useState(null);

  useEffect(() => {
    let cleanupFunction = false;
    const fetchData = async () => {
      try {
        const response = await fetch(MOVIE_DB_GET);
        const result = await response.json();
        console.log(result, 'result')

        // непосредственное обновление состояния при условии, что компонент не размонтирован
        if(!cleanupFunction) setMovie(result);
      } catch (e) {
        console.error(e.message)
      }
    };

    fetchData();

    // функция очистки useEffect
    return () => cleanupFunction = true;
  }, []);

  // descriptionMovie - некая функция, возвращающая view, то есть рендерит информацию о фильме посредством состояния movie

  return (
    <main>
      <h2>Главная страница</h2>
      <p>Описание фильма</p>

      {
        movie ? descriptionMovie() : false
      }
    </main>
  )
};

export default HomePage;

Итого:

• Особенности размонтирования компонента и обновление состояния
• Взаимодействие конструкции try/catch и асинхронность async/await

Весь исходный код можно посмотреть здесь: https://gitlab.com/ImaGadzhiev/react-cant-perform