title: Why my setState returns an array, but the state is a promise when the component rerender?
body: <p>The code below try to check if an url is reachable or not.
  The urls to check are stored in a state called <em>trackedUrls</em>
  I update this state with an async function <em>checkAll</em>.
  The object just before being updated seems fine, but when the component rerender, it contains a promise !</p>
  <ul>
  <li>Why ?</li>
  <li>What I should change to my code ?</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;
  
  export default function App() {
  
      const [trackedUrls, setTrackedUrls] = React.useState([])
  
      // 1st call, empty array, it's ok
      // 2nd call, useEffect populate trackedUrls with the correct value
      // 3rd call, when checkAll is called, it contains a Promise :/
      console.log(&quot;trackedUrls  :&quot;, trackedUrls)
      const wrappedUrls = trackedUrls.map(urlObject =&gt; {
          return (
              &lt;div key={urlObject.id}&gt;
                  &lt;a href={urlObject.url} target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;{urlObject.label}&lt;/a&gt;
              &lt;/div&gt;
          )
      })
  
      // check if the url is reachable
      // this works well if cors-anywhere is enable, click the button on the page
      async function checkUrl(url) {
          const corsUrl = &quot;https://cors-anywhere.herokuapp.com/&quot; + url
          const result = await fetch(corsUrl)
              .then(response =&gt; response.ok)
          console.log(result)
          return result
      }
  
      // Checks if every url in trackedUrls is reachable
      // I check simultaneously the urls with Promise.all
      async function checkAll() {
          setTrackedUrls(async oldTrackedUrls =&gt; {
              const newTrackedUrls = await Promise.all(oldTrackedUrls.map(async urlObject =&gt; {
                  let isReachable = await checkUrl(urlObject.url)
                  const newUrlObject = {
                      ...urlObject,
                      isReachable: isReachable
                  }
                  return newUrlObject
              }))
  
              // checkAll works quite well ! the object returned seems fine
              // (2) [{…}, {…}]
              // { id: '1', label: 'google', url: 'https://www.google.Fr', isReachable: true }
              // { id: '2', label: 'whatever', url: 'https://qmsjfqsmjfq.com', isReachable: false }
              console.log(newTrackedUrls)
              return newTrackedUrls
          })
      }
  
      React.useEffect(() =&gt; {
          setTrackedUrls([
              { id: &quot;1&quot;, label: &quot;google&quot;, url: &quot;https://www.google.Fr&quot; },
              { id: &quot;2&quot;, label: &quot;whatever&quot;, url: &quot;https://qmsjfqsmjfq.com&quot; }
          ])
      }, [])
  
      return (
          &lt;div&gt;
              &lt;button onClick={checkAll}&gt;Check all !&lt;/button&gt;
              &lt;div&gt;
                  {wrappedUrls}
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  </code></pre>