title: custom http hook using axios
body: <p>I am trying to create my first custom hook but I am not sure if I am on the right track here. Probably not, which is why I am asking.. First of all, I am not sure if the cancel token will work like this or if I need to use it when I actually use this hook in a component.</p>
  <pre><code>import { useState } from &quot;react&quot;;
  import Axios from &quot;axios&quot;;
  
  export default useApi = () =&gt; {
    const [data, setData] = useState([]);
    const [error, setError] = useState(false);
    const [loading, setLoading] = useState(false);
  
    const request = async () =&gt; {
      const ourRequest = Axios.CancelToken.source();
      setLoading(true);
      try {
        const response = await Axios(url, options);
        setData(response.data);
        setLoading(false);
      } catch (error) {
        setLoading(false);
        setError(error);
      }
      return () =&gt; {
        ourRequest.cancel();
      };
    };
  
    return { data, error, loading, request };
  };
  </code></pre>