Как размонтировать, то что находится не в useEffect?

Question

[Дмитрий Марков]

У меня в компонент используется observer для подгрузки контента. Получается когда срабатывает observer идёт запрос на сервер(асинхронная фигня). Если я переключусь с одного маршрута на другой и вернусь обратно, то получу ошибку "Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function". Я выяснил что эту ошибку вызывает изменение стейта в ответе реста и так думаю что мне нужно это размонтировать, но я же могу размонтировать только то , что находится в useEffect, а мои сетстейты не в нём)
Вопрос.
Как размонтировать это?

Answer 1

[Alexandroppolus]

Проблема в том, что ты запускаешь асинхронные действия в useEffect. Это не очень правильно, логику лучше выносить отдельно, а её результаты складывать в стор.

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

const useCheckMounted = (): (() => boolean) => {
  const ref = useRef(true)
  useLayoutEffect(() => {
    ref.current = true
    return () => {
      ref.current = false
    }
  }, [ref])
  return useCallback(() => {
    return ref.current
  }, [ref])
}

// пример использования:
const Child: React.FC = React.memo(() => {
  const check = useCheckMounted()

  useEffect(() => {
    console.log('check1, ', check())
    setTimeout(() => {
      console.log('check2, ', check())
    }, 8000)
  }, [check])

  return <div>child</div>
})

этот компонент запускает setTimeout, символизирующий долгий запрос. Перед запуском check() возвращает true - компонент смонтирован. При ответе сервера check() вернет false, если компонент слетел, или true, если ещё жив.
Пример на TS, если что - просто убери типы

Comments

[Дмитрий Марков]

Я запускаю асинхронные действия не в useEffect. А в observer

[Alexandroppolus]

Дмитрий Марков, это не суть важно. Используй check в том колбэке, в котором выставляется стейт.

[Дмитрий Марков]

Alexandroppolus, У меня запрос не ломается, у меня не работает setState. Ответ приходит , но почему то не добавляется в стейт

[Alexandroppolus]

Дмитрий Марков, ответ приходит, когда компонент уже размонтирован. Потому и ошибка при вызове setState.

[Alexandroppolus]

Дмитрий Марков, а если твой компонент подписывается на какое-то событие, то всё ещё проще - надо просто отписываться.

const Child: React.FC = React.memo(() => {
  const [state, setState] = useState(..)

  useLayoutEffect(() => {
    const func = () => {
      setState(...);
    };
    someObservable.on('eventName', func);
    return () => {
      someObservable.off('eventName', func);
    };
  }, [setState])

  return ...
})

вот примерно так