title: Getting error after I put Async function in useEffect
body: <p>In the useEffect function, if I just mention the getResults function variable, the app doesn't crash. But when I call it as I am doing in code below, I get these errors:</p>
  <blockquote>
  <p>react-dom.development.js:21857 Uncaught TypeError: destroy is not a
  function</p>
  </blockquote>
  <p>and</p>
  <blockquote>
  <p>Consider adding an error boundary to your tree to customize error handling behavior.</p>
  </blockquote>
  <pre><code>  function App() {
    const [foods, setFoods] = useState([]);
    const [isLoaded, setIsLoaded] = useState(false);
    useEffect(() =&gt; getResponse());
    const getResponse = async () =&gt; {
      const response = await fetch(sampleRequest);
      const data = await response.json();
      setFoods(data.hits);
    };
    let query = &quot;Tomato&quot;;
    let sampleRequest = `https://api.edamam.com/search?q=${query}&amp;app_id=${&quot;1811484f&quot;}&amp;app_key=${&quot;9cac93361efc99e2ebfbb8a453882af8&quot;}`;
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;main&quot;&gt;
          &lt;div className=&quot;navbars&quot;&gt;
            {&quot; &quot;}
            &lt;Navbars&gt;&lt;/Navbars&gt;
          &lt;/div&gt;
          &lt;div className=&quot;listings&quot;&gt;
            &lt;Listing&gt;&lt;/Listing&gt;
            &lt;Listing&gt;&lt;/Listing&gt;
            &lt;Listing&gt;&lt;/Listing&gt;
            &lt;Listing&gt;&lt;/Listing&gt;
            &lt;Listing&gt;&lt;/Listing&gt;
            &lt;Listing&gt;&lt;/Listing&gt;
            &lt;Listing&gt;&lt;/Listing&gt;
            &lt;Listing&gt;&lt;/Listing&gt;
            &lt;Listing&gt;&lt;/Listing&gt;
            &lt;Listing&gt;&lt;/Listing&gt;
          &lt;/div&gt;
          &lt;div className=&quot;footer&quot;&gt;
            &lt;h5&gt;Made By YoYo Strangler in 2019&lt;/h5&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>