title: How to fetch data from a custom React hook (API) with onClick and display it in a Div using TypeScript?
body: <p>I'm new to TypeScript and even React Hooks. I'm trying to fetch data continuously from a custom hook called <code>useFetch()</code>, which takes in a string (the URL) parameter:</p>
  <pre><code>import { useEffect, useState } from &quot;react&quot;;
  
  export interface Payload {
    data: null | string,
    loading: boolean
  }
  
  const useFetch = (url: string) =&gt; {
    const [state, setState] = useState&lt;Payload&gt;({data: null, loading: true})
  
    useEffect(() =&gt; {
      setState(state =&gt; ({ data: state.data, loading: true }));
      fetch(url)
        .then(x =&gt; x.text())
        .then(y =&gt; {
          setState({ data: y, loading: false });
        });
    }, [url, setState])
  
    return state;
    }
  
  export default useFetch;
  </code></pre>
  <p>I import that hook into <code>App()</code>:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import useFetch from './utils/useFetch'
  import {Payload} from './utils/useFetch';
  
  const App = () =&gt; {
    const [quote, setquote] = useState&lt;Payload&gt;({data: null, loading: true})
    const handleClick = () =&gt; setquote(data)
  
    const data = useFetch(
      &quot;/api/rand&quot;
    );
  
    return (
      &lt;div&gt;
        &lt;h1&gt;Quotes&lt;/h1&gt;
        &lt;button onClick={handleClick}&gt;Get Quote&lt;/button&gt;
        &lt;div&gt;{quote.data}&lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default App;
  </code></pre>
  <p>On the first time the app loads, it works. I get data (a quote) when I click the button.</p>
  <p><a href="https://i.stack.imgur.com/CtqhN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CtqhN.png" alt="Preview" /></a></p>
  <p>However, when I click it multiple times, the API isn't called again, and new data doesn't come through. I believe I'm supposed to use the <code>useEffect()</code> react hook and maintain the state (maybe I'm mistaken) but all my attempts so far have been to no avail. Any help would be much appreciated. If I figure it out, I'll definitely answer this question. Thanks!</p>