When returning abort as the useEffect cleanup function, the request aborts and the promise resolves as expected, but I still see the React warning: Warning: 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. in Test (at App.js:15)

Question: How do I cancel a fetch on unmount (and not receive the React warning)?

In case this Codesandbox link expires, I'll paste the code below. I tried to keep it simple -- one component unmounts another component before its fetch finishes

App.js - unmount <Test /> after 100ms (to interrupt the API call made by <Test />)

import Test from "./Test"; import "./styles.css"; export default function App() { const [bool, setBool] = useState(true); // 100ms after mounting, set bool to false useEffect(() => { setTimeout(() => { setBool(false); }, 100); }, []); return <div className="App">{bool && <Test />}</div>; } 

Test.js - Make an API call using useFetch, and return abort from useEffect

import useFetch from "use-http"; export default function Test() { const { get, abort } = useFetch( "https://jsonplaceholder.typicode.com/posts/1" ); const loadIt = async () => await get(); useEffect(() => { loadIt(); return abort; }, []); return <h1>I am here</h1>; }