React: async call to wait for another async call?

Question

How do I form this function to 'wait' for stateUserInfo to be surely filled first, before proceeding to setting the stateToken (trigger to conditionally render to my HomeScreen)?

    async function submitLogin() {         
            try {
                const data = await axios.post(apiAuth, {username: email, password: password, auth: auth})
                const jwt = data.data.data.jwt
                console.log(jwt)
                getUserDetails(jwt)            
            }
            catch (err) {
                console.log(err)
            }
        } 

    async function getUserDetails(jwt) {      
        const data = await axios.get(apiValidate+'&JWT='+jwt)
        setTimeout(function() {
            setStateUserInfo(data.data)
        }, 4000);

        //go to HomeScreen BUT FIRST WAIT FOR stateUserInfo!!!
        setStateToken(jwt) 
    }

Move `setStateToken` into the same callback function as `setStateUserInfo`? The issue here appears to have nothing to do with waiting for the state updates, but rather "waiting for" your explicit hard-coded 4-second delay. — David, Jun 29 '22 at 13:41
One wonders why you're waiting 4 seconds to call `setStateUserInfo`... You probably want to `await getUserDetails(jwt)`. In any case, if you want something to happen when state is set, use `useEffect`. See [How to use `setState` callback on react hooks](https://stackoverflow.com/q/56247433/215552) — Heretic Monkey, Jun 29 '22 at 13:48
Does this answer your question? [How to use \`setState\` callback on react hooks](https://stackoverflow.com/questions/56247433/how-to-use-setstate-callback-on-react-hooks) — Heretic Monkey, Jun 29 '22 at 13:48
i'm delaying it 4 secs for testing purposes to make sure it takes a long time — Rollor, Jun 29 '22 at 14:01

score 0 · Answer 1 · answered Jun 29 '22 at 13:44

0

One way to handle this would be with the help of useEffect, which is a built-in React hook that activates a callback when one of it's dependencies have changed.

Example:

useEffect(() => {
   setStateUserInfo(data.data);
   // Whatever else we want to do after the state has been updated.
}, [stateToken])

This will "watch" the value of stateToken and run the callback every time it changes.
Hence, whenever stateToken gets updated, so does stateUserInfo.

Check the documentation for more info.

answered Jun 29 '22 at 13:44

tomleb

2,409
2
9
24

`useEffect` does not "watch" for value changes nor nothing in React watch for state changes. We tell the react to update the things by calling `setState` – Dilshan Jun 29 '22 at 13:57
Using the term "watch" here to make it easier to understand. – tomleb Jun 29 '22 at 14:17
`We tell the react to update the things by calling setState.` Don't understand what you mean by this, this sentence makes no sense. – tomleb Jun 29 '22 at 14:17
Using the word "watch" can lead to misunderstanding. Someone can think that the react uses reactive programming/concepts. React only re renders in response to the state changes ( We schedule the re renders by using setState ), and the effects will be queueing to run after the rendering is done. useEffect will compare the previous deps values with the new values to see if any changes happened to the state and then execute the cb. – Dilshan Jun 29 '22 at 14:31
Fair enough, good explanation. Feel free to edit the answer if you'd like. – tomleb Jun 29 '22 at 14:44

React: async call to wait for another async call?

1 Answers1