title: I'm fetching data from an API in an async function in React and it works fine, but when I return the data I get a pending promise
body: <p>I have the following React and TypeScript code:</p>
  <pre><code>const fetchData = async () =&gt; {
      const res: any = await fetch(&quot;https://api.spotify.com/v1/search?q=thoughtsofadyingatheist&amp;type=track&amp;limit=30&quot;, {
        method: &quot;GET&quot;,
        headers: {
          Accept: &quot;application/json&quot;,
          &quot;Content-Type&quot;: &quot;application/json&quot;,
          Authorization: &quot;Bearer BQD2JKxAuqmgsNKgWx6JiRMCskc3l1FK3VsHfOah3ey86GC8EmGBlrEGAfTCyVB1cFo2TDVQYQm8RvB_YQD6V9cXUf_HER0dfBeLc_AZ0N56VNOrsLyt2yzK6gaD5WarThefqmZj68ODXUVrLwQYfuocahIUhWOEO4WuziwVvloE&quot;,
        },
      });
      const data: any = await res.json();
      console.log(data.tracks.items);
      return data.tracks.items;
    };
    
    useEffect(() =&gt; {
      const data: any = fetchData(); 
      console.log(data);
      setLoading(false);
    }, []);
  </code></pre>
  <p>When I print the data to the console from the <code>fetchData</code> function I get the expected data, but when I print it from the <code>useEffect</code> hook I get a pending promise like this: <code>Promise {&lt;Pending&gt;}</code>.</p>
  <p>I'd appreciate any help.</p>