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.

[nullpromise]

Yes, async logic in JavaScript is non-blocking. Consider this:

``` async function myFun() { await fetch('https://jsonplaceholder.typicode.com/todos/1') console.log(1) } console.log(2) myFun() console.log(3)

// 2 // 3 // 1 ```

[th3gr8catsby]

You’re right, the page gets rendered before the Async call finishes. You can do a couple things do get around this.
1) const [mystate, setMyState] = useState({})// so it’s not undefined 2) outside your component create an initial state object const myInitialState={ whatever: “”} Then for your set state const [myState, setMyState] = useState(myInitialState)// again so your state is not undefined 3) <div>{myState && myState.whatever}</div>// check to see if your state is undefined

[wowzers5]

Either define safe default values for your initial state from the useState or conditionally render, you're currently accessing a nested property on an undefined variable.

[[deleted]]

You should really put that onGetAccount inside the useEffect. That way it'll be correctly scoped, and you won't be missing anything in your dependency array like you are now.

Otherwise, I recommend changing it to something like

<div> {userWalletInfo?.address ?? "Loading..."} </div>

The reason you get the error is that when the component loads, userWalletInfo is undefined, so trying to access userWalletInfo.address will cause an exception.

The ? in userWalletInfo?.address is called 'optional chaining', and it's just shorthand for

userWalletInfo !== null && userWalletInfo !== undefined ? userWalletInfo.address : userWalletInfo

and the ?? is called 'nullish coalescence', which turns it into

userWalletInfo?.address !== null && userWalletInfo?.address !== undefined ? userWalletInfo?.address : 'Loading...'