title: React useEffect hook and Async/await own fetch data func?
body: <p>I tried to create a function for fetching data from the server, and it works. 
  But I am not sure if that the right way? </p>
  
  <p>I created a function component to fetching data, using <strong>useState</strong>, <strong>useEffect</strong> and <strong>Async/Await</strong>  :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useEffect } from "react";
  
  const Fetch = () =&gt; {
    const [data, setData] = useState(null);
    useEffect(() =&gt; {
      const fetchData = async () =&gt; {
        let res = await fetch(
          "https://api.coindesk.com/v1/bpi/currentprice.json" //example and simple data
        );
        let response = await res.json();
        setData(response.disclaimer); // parse json
        console.log(response);
      };
      fetchData();
    }, []);
    return &lt;div&gt;{data}&lt;/div&gt;;
  };
  
  export default Fetch; // don't run code snippet, not working, this component must be imported in main</code></pre>
  </div>
  </div>
  </p>
  
  <p>Where I am not sure is a place <strong>where</strong> to <strong>call</strong> the <strong>fetchData</strong> function. I do that inside useEffect? Right place? And, this call will happen only one? Because i use <strong>[]</strong>?</p>
  
  <p>Generally, how would you do something like this?</p>