React: useFetch() helper, abort fetch() using AbortController

useFetch.js

import { useEffect, useState } from "react"; 

expoprt function useFetch(url) {
 
 const [loading, setLoading] = useState(true);
 const [data, setData] = useState(null);
 const [error, setError] = useState(null);
  
 useEffect(() => {
    controller = new AbortController();
    const signal = controller.signal;
   
    fetch(url, { signal })
      .then((response) => {
        setData(response.data);
      })
      .catch(setError)
      .finally(() => setLoading(false));
   
   return () => {
     controller.abort(); // here we abort the previous fetch request which could start but didn't finish
   };
  }, [url]);
  
  return { loading, data, error };
}