axios-with-cancel.js

import React, {useState, useEffect} from "react";
import axios from "axios";


const ComponentWithRequest = props => {

    const [apiData, setApiData] = useState(null);

    useEffect(() => {
        const source = axios.CancelToken.source();

        axios.get("https://jsonplaceholder.typicode.com/todos", {
            cancelToken: source.token
        }).then(response => {
            setApiData(response.data);
        }).catch(err => {
            console.log("Catched error: " + e.message);
        });

        props.toggleMounted();

        return () => {
            source.cancel("Component got unmounted");
        };
    }, [props]);

    return (
        <div className="box">
            <p>I will immediately get unmounted.</p>
        </div>
    );
};

export default ComponentWithRequest;