To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function

Question

I have this code

import ReactDOM from "react-dom";
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Route         


        

Answer 1

I think the problem is caused by dismount before async call finished.

const useAsync = () => {
  const [data, setData] = useState(null)
  const mountedRef = useRef(true)

  const execute = useCallback(() => {
    setLoading(true)
    return asyncFunc()
      .then(res => {
        if (!mountedRef.current) return null
        setData(res)
        return res
      })
  }, [])

  useEffect(() => {
    return () => { 
      mountedRef.current = false
    }
  }, [])

mountedRef is used here to indicate if the component is still mounted. And if so, continue the async call to update component state, otherwise, skip them.

This should be the main reason to not end up with a memory leak (access cleanedup memory) issue.