title: How to call an async function inside a UseEffect() in React?
body: <p>I would like to call an async function and get the result for my UseEffect.</p>
  
  <p>The fetch api examples i found on the internet are directly made in the useEffect function.
  If my URL changes, i must patch all my fetchs.</p>
  
  <p>When i tried, i got an error message.</p>
  
  <p>This is my code.</p>
  
  <pre><code>
      async function getData(userId) {
          const data = await axios.get(`http://url/api/data/${userId}`)
              .then(promise =&gt; {
                  return promise.data;
              })
              .catch(e =&gt; {
                  console.error(e);
              })
              return data;
      }
  
  
      function blabla() {
          const [data, setData] = useState(null);
  
          useEffect(async () =&gt; {
              setData(getData(1))
          }, []);
  
          return (
              &lt;div&gt;
                  this is the {data["name"]}
              &lt;/div&gt;
          );
      }
  
  </code></pre>
  
  <p><em>index.js:1375 Warning: An effect function must not return anything besides a function, which is used for clean-up.
  It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately:</em></p>
  
  <pre><code>useEffect(() =&gt; {
    async function fetchData() {
      // You can await here
      const response = await MyAPI.getData(someId);
      // ...
    }
    fetchData();
  }, [someId]); // Or [] if effect doesn't need props or state
  </code></pre>