title: Load async data before rendering the DOM
body: <p>Still learning, and I have an issue understanding how I can get the data from an async function then show it in the DOM.</p>
  <p>Indeed, I'm getting undefined, since the dom renders before the async function.</p>
  <p>I'm stuck and my question is how to manage this situation ? What's the good practice ?</p>
  <pre><code>export default function ProductCard ({ product }) {
  
      const { handle, title } = product.node
  
      const [productDetails, setProductDetails] = useState();
  
      const data = async () =&gt; {
          const data = await getProduct(handle)
          //console.log(data)
          setProductDetails(data);
      }
  
      useEffect(() =&gt; {
          data();
      }, [])
  
  //or data();
  
  console.log(&quot;productDetails&quot;, productDetails);
  
  
  return (
      &lt;&gt;
         {productDetails.handle}
      &lt;/&gt;
  )
  
  
  }
  </code></pre>
  <p>Thanks for the help and support.</p>