title: promise funtion for returning react components
body: <p>Does anyone have a fix for this if-else won't work in run build, but will in run dev. The only way to make this work is to use a react hook but I don't have the slightest idea of which one and where to implement it.</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 { useAddress } from "@thirdweb-dev/react";
  import Head from 'next/head';
  import Link from 'next/link';
  import Username from '../components/Username';
  import React from "react";
  
  
  
  const Home = () =&gt; {
  
      let p = new Promise((resolve, reject) =&gt; {
          let address = useAddress();
          if (address) {
              resolve(address)
          } else {
              console.log('no addy')
              reject()
          }
      })
  
      p.then((address) =&gt; {
          return (
              &lt;&gt;
                  &lt;Head&gt;
                      &lt;title&gt;DRUMM3R&lt;/title&gt;
                      &lt;link rel="icon" href="/drum.svg" /&gt;
                  &lt;/Head&gt;
                  &lt;Username address={address} /&gt;
              &lt;/&gt;
          );
      }).catch(() =&gt; {
          return (
              &lt;&gt;
                  &lt;Head&gt;
                      &lt;title&gt;DRUMM3R&lt;/title&gt;
                      &lt;link rel="icon" href="/drum.svg" /&gt;                
                  &lt;/Head&gt;
                  &lt;Link href="/"&gt;
                      &lt;a className="absolute pt-1 text-xl font-semibold transform -translate-x-1/2 top-1/2 left-1/2"&gt;click here to log in&lt;/a&gt;
                  &lt;/Link&gt;
              &lt;/&gt;
          );
      })        
  }
  
  export default Home;</code></pre>
  </div>
  </div>
  </p>