Как бороться с утечкой памяти при использовании UseEffect?

Question

[LoveCodeandCoffe]

Ббьюсь уже не первый день но не получается разобраться . Есть внешняя функция которая (async) которая выполняет другую функцию (async, эта функция общается с api). далее я хочу чтобы 1 функция, выполнялась при старте ( в идеале еще и при изменении параметров, но это я организовал, через прокидование c allback функции дочерним компонентам)
UseEffect просит, пожалуйста не сунь в меня асинхронную функцию, окей смотрю как люди делаю на стаковерфлоу и на разных тематических порталах. Можно эту функцию сделать внешней, в качестве 2 параметра передать либо пустой массив, тогда функция выполниться 1 раз, либо с параметрами . Но все это у меня не решает проблему размонтирования компонента. Проявляется она таким образом, я пишу админку. И когда я перехожу на таб с таблицей сотрудников, у меня срабатывает функция в useeffect и грузятся с jsonserverа пользователи все ок. Но периодически выскакивет ошибка реакта

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.

Часто такое происходит когда, например не дождался загрузки пользователей в таблицу а свалил на другой таб. Может кто подскажет, как решать такую проблему?

const [loading, setLoading] = useState(false)
  useEffect(() => {
    UpdateStoreifChildChange(loading)
  }, [loading])
  useEffect(() => {
    UpdateStoreifChildChange(loading)
  }, [])

  async function UpdateStoreifChildChange(flag) {
    setLoading(true)
    try {
      await asyncGetDataAndUpdateStore(GET_FETCH_EMPLOYEES, SET_NEW_STORE)
    } catch (e) {
      setError(e.message || 'Unexpected error')
    }
    setLoading(false)
  }

Answer 1

[Robur]

из useEffect можно вернуть функцию которая будет вызвана при размонтировании компонента.
Дальше в ней вы делаете все что нужно чтобы почистить память, отменить запросы и так далее.
Если запросы "неотменяемые" то при размонтировании помечаете где-нибудь что данные уже не нужны, и при окончании запроса и получении данных просто ничего не делаете

Answer 2

[LoveCodeandCoffe]

UseEffect просит, пожалуйста не сунь в меня асинхронную функцию

Похоже я уже, не соображаю, и вроде как передаю саму асинхронную функцию в хук, ну окей если обернуть эту функцию в еще 1 функцию уже не async ошибка не куда не уходит

Comments

[LoveCodeandCoffe]

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