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

У меня в компонент используется 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, а мои сетстейты не в нём)
Вопрос.
Как размонтировать это?
  • Вопрос задан
  • 60 просмотров
Пригласить эксперта
Ответы на вопрос 1
Alexandroppolus
@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, если что - просто убери типы
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы