title: React hooks useeffect
body: <p>I am having an issue with my app in that it re renders a new joke twice when I click the new button function. Here is my code:</p>
  
  <pre><code>    import React, { useState, useEffect } from "react";
  import { Typography, Button } from "@material-ui/core";
  
  import Navigation from "../Navigation";
  export default function RandomJoke() {
    const [isLoaded, setLoaded] = useState(false);
    const [jokeData, setJokeData] = useState({});
    const [loadNewJoke, setLoadNewJoke] = useState(false);
  
    function useFetch() {
      async function fetchMyAPI() {
        let response = await fetch("https://icanhazdadjoke.com/slack");
        response = await response.json();
        setJokeData(response);
        setLoaded(true);
      }
  
      useEffect(() =&gt; {
        fetchMyAPI();
        if (loadNewJoke) setLoadNewJoke(false);
      }, [loadNewJoke]);
    }
    useFetch();
  
    function reloadJoke() {
      setLoaded(false);
      setLoadNewJoke(true);
    }
  
    return (
      &lt;&gt;
        &lt;Navigation mainpage="RandomJoke" /&gt;
  
        &lt;Typography variant="h6"&gt;Random Dad Joke&lt;/Typography&gt;
        {isLoaded &amp;&amp; &lt;div&gt;{jokeData.attachments[0].text}&lt;/div&gt;}
        {!isLoaded &amp;&amp; &lt;div&gt;loading...&lt;/div&gt;}
        {isLoaded &amp;&amp; (
          &lt;Button variant="contained" onClick={() =&gt; reloadJoke()}&gt;
            New one
          &lt;/Button&gt;
        )}
      &lt;/&gt;
    );
  }
  </code></pre>
  
  <p>I tried adding a newjoke state hook but still couldn't work it out. Thank you</p>