title: How can I make my axios function reusable in other React/Typescript components?
body: <p>I am copying/pasting the same code for making axios requests in multiple components like this:</p>
  <pre><code>React.useEffect(() =&gt; {
      axios
          .get&lt;IDownloads[]&gt;(`${process.env.PUBLIC_URL}/api/downloads`, {
  
          headers: {
            'Content-Type': 'application/json',
          },
          timeout: 5000,
        })
        .then((response) =&gt; {
          setFaqs(response.data);
        })
        .catch((ex) =&gt; {
          const err = axios.isCancel(ex)
            ? 'Request cancelled'
            : ex.code === 'ECONNABORTED'
              ? 'A timeout has occurred'
              : ex.response.status === 404
                ? 'Resource not found'
                : 'An unexpected error has occurred';
          setError(err);
        });
  
    }, []);
  </code></pre>
  <p>Which works, but doesn't follow DRY.  I want to be able to reuse this code in other areas of my application but need to be able to change the .get&lt;IDownloads[]&gt;(<code>${process.env.PUBLIC_URL}/api/downloads</code> to work in other areas. Like .get&lt;ISomethingElse[]&gt;(<code>${process.env.PUBLIC_URL}/api/somethingElse</code>  I made a new component in attempt to do this</p>
  <pre><code>export default function useApiRequest&lt;T&gt;(url: string): { response: T | null; error: Error | null} {
     const [response, setResponse] = React.useState&lt;T | null&gt;(null);
     
      const [error, setError] = React.useState&lt;Error | null&gt;(null);
    
      React.useEffect(() =&gt; {
        const fetchData = async (): Promise&lt;void&gt; =&gt; {
         try {
             const res = await axios(`${process.env.PUBLIC_URL}${url}`);
             setResponse(res.data);
         } catch (error) {
             setError(error);
         }
      };
      fetchData();
  }, [url]);
    
      return { response, error };
    };
  </code></pre>
  <p>and using it in this component like this:</p>
  <pre><code>interface IDownloads {
    db_id: number;
    file_description: string;
    file_name: string;
    developer_name: string;
    date_uploaded: string;
    file_url: string;
  }
  
  const defaultProps: IDownloads[] = [];
  
  const DownloadCodeSamplesPage: React.FC = () =&gt; {
  
    const downloadQuery = useApiRequest&lt;IDownloads[]&gt;('/api/download');
   
    const [downloads, setDownloads]: [IDownloads[], (posts: IDownloads[]) =&gt; void] =
      React.useState(defaultProps);
  </code></pre>
  <p>In my return I am mapping through the downloads like so</p>
  <pre><code>
                    downloads.map((download) =&gt; (
                      &lt;tr key={download.db_id}&gt;
                        &lt;td&gt;{download.file_description}&lt;/td&gt;
                        &lt;td&gt;{download.file_name}&lt;/td&gt;
                        &lt;td&gt;{download.developer_name}&lt;/td&gt;
                        &lt;td&gt;{download.date_uploaded}&lt;/td&gt;
  </code></pre>
  <p>When I run the program I am not receiving any data from the api call.  What am I doing wrong?</p>