// custom Hook for automatic abortion on unmount or dependency change

// You might add onFailure for promise errors as well.

function useAsync(asyncFn, onSuccess) {

  useEffect(() => {

    let isActive = true;

    asyncFn().then(data => {

      if (isActive) onSuccess(data)

      else console.log("aborted setState on unmounted component")

    });

    return () => {

      isActive = false;

    };

  }, [asyncFn, onSuccess]);

}

​

const Child = () => {

  const [state, setState] = useState("loading (4 sec)...");

  useAsync(simulateFetchData, setState);

  return <div>Child: {state}</div>;

};

​

const Parent = () => {

  const [mounted, setMounted] = useState(true);

  return (

    <div>

      Parent:

      <button onClick={() => setMounted(!mounted)}>

        {mounted ? "Unmount" : "Mount"} Child

      </button>

      {mounted && <Child />}

      <p>

        Unmount Child, while it is still loading. It won't set state later on,

        so no error is triggered.

      </p>

    </div>

  );

};

​

const simulateFetchData = () => new Promise(

  resolve => setTimeout(() => resolve("data fetched"), 4000));

​

ReactDOM.render(<Parent />, document.getElementById("root"));

useEffect(() => {

  let isMounted = true;               // note mutable flag

  someAsyncOperation().then(data => {

    if (isMounted) setState(data);    // add conditional check

  })

  return () => { isMounted = false }; // cleanup toggles value, if unmounted

}, []);                               // adjust dependencies to your needs

​

componentWillUnmount() {

    // fix Warning: Can't perform a React state update on an unmounted component

    this.setState = (state,callback)=>{

        return;

    };

}

​

export default function MyComponent() {

    const [loading, setLoading] = useState(false);

    const [someData, setSomeData] = useState({});

    let componentMounted = true; // (3) component is mounted

    // ...

    useEffect(() => {

        setLoading(true);

        someResponse = await doVeryLongRequest(); // it needs some time

        // When request is finished:

        if (componentMounted){ // (5) is component still mounted?

            setSomeData(someResponse.data); // (1) write data to state

            setLoading(false); // (2) write some value to state

        }

        return () => { // This code runs when component is unmounted

            componentMounted = false; // (4) set it to false if we leave the page

        }

    }, []);

​

    return (

        <div className={loading ? "loading" : ""}>

            {someData}

            <a href="SOME_LOCAL_LINK">Go away from here!</a>

        </div>

    );

}

​

useEffect(() => {

    const source = axios.CancelToken.source()

​

    const fetchUsers = async () => {

        try {

            await Axios.get('/users', {

                cancelToken: source.token,

            })

            // ...

        } catch (error) {

            if (Axios.isCancel(error)) {

            } else {

                throw error

            }

        }

    }

​

    fetchData()

​

    return () => {

        source.cancel()

    }

}, [])

​