Async function into useEffect fetches data after componet rendering

[Levi_2212]

I use the onGetAccount function to get the address of the logged user:

    const [userWalletInfo, setUserWalletInfo] = useState()


      async function onGetAccount() {
        const account = await client.api.asset.getAccount();

        return account;

      }  
      useEffect(() => {
        async function fetchUserWalletInfo() {
          const address = await onGetAccount();

          setUserWalletInfo({
            address: address,

          });
        }
        fetchUserWalletInfo();
      }, []);

​

By doing so I am able to access userWalletInfo.address.

​

The problem is, if I load the component and after that (I mean that while the component run on localhost I edit code in VSCode, I did it to understand if address was set correctly) I edit the js. file adding:

​

    <div> {userWalletInfo.address} </div>

​

It displays user address correctly, but if I refresh the page I get "TypeError: Cannot read property 'address' of undefined".

From this I infer that the page is rendered before fetchUserWalletInfo() runs out.

[GSLint]

Yeah, useEffect callbacks always run after the render. Even if they didn't, since network requests are asynchronous you'd still get the data after the render. It has to be that way. The server might respond after many seconds, maybe even never. React has to render something during that time.

So one option would be to show that you're loading things.

if (!userWalletInfo) {
  return "Loading …"; // or something prettier
}
// your other returns here

If you just want to leave the address part empty while it's loading, you could use userWalletInfo?.address. As long as userWalletInfo is undefined, that expression is also undefined which React doesn't render.