How to wait for 3 async functions to finish in react?-CodePudding

I am usng the following library to generate sha256 hashes:

https://www.npmjs.com/package/crypto-hash

The hashing is working but it is asynchronous. I am trying to figure out how to wait for the following code to execute:

async function hashAnswers() {
    try {
      await sha256(firstAnswer)
        .then(hash => { setFirstHash(hash)})
      await sha256(secondAnswer)
        .then(hash => { setSecondHash(hash)})
      await sha256(thirdAnswer)
        .then(hash => { setThirdHash(hash)})
    }
    catch (error) {
      console.log(error);
    }
  }

and calling it here:

 async function handleSubmit() {
    await hashAnswers().then(result => {
      console.log(firstHash);
    })
  }

However, it does not wait for the answers to hash before logging.

Thanks in advance

CodePudding user response：

EDIT:

The solution proposed in the comments to use Promise.all is actually a good suggestion. You just need to have your hashAnswers function return a tuple of values which are hashes of the answers:

async function hashAnswers() {
    try {
      return await Promise.all([
        sha256(firstAnswer), sha256(secondAnswer), sha256(thirdAnswer),
      ])
    }
    catch (error) {
      console.log(error);
    }
}

Now your handleSubmit function will have access to the values returned:

async function handleSubmit() {
    const [hash1, hash2, hash3] = await hashAnswers().then(result => {
      setFirstHash(hash1);
      setSecondHash(hash2);
      setThirdHash(hash3);

      console.log(hash1);
    })
}

Previous answer:

The first problem is that in react, setState is asynchronous and does not immediately update the state. So all your calls to setXHash, etc may not actually update the state before you are ready to use them.

The second problem is that your function will not have access to the updated values because they will be updated in a different render of the component which will be different from the current render in which the function was called. Remember that every state change causes the entire component to re-render.

Solution?

There are two potential solutions:

Create another state which is updated when the function is finished
Store the hashes in a mutable ref (useRef)

The second option may be the easiest to implement:

const firstHashRef = useRef();
// Do the same for secondHashRef, etc
...
async function hashAnswers() {
    try {
      await sha256(firstAnswer)
        .then(hash => { firstHashRef.current = hash; })
      await sha256(secondAnswer)
        .then(hash => { secondHashRef.current = hash; })
      await sha256(thirdAnswer)
        .then(hash => { thirdHashRef.current = hash; })
    }
    catch (error) {
      console.log(error);
    }
}

Now in your handleSubmit function, you can console.log(firstHashRef.current) after the async hashAnswers is finished.

CodePudding user response：

No need to await if you're using then. I'm not sure what setFirstHash, setSecondHash return, but it seem like Promise.all would probably do the job for you as suggested by Brian. Here is the gist:

const hashAnswers = () => {
    const promises = [];
        try {
            promises.push(
                sha256(firstAnswer).then(hash => {
                    setFirstHash(hash);
                    return 'first is set';
                })  
            );
            
            promises.push(
                sha256(secondAnswer).then(hash => {
                    setSecondHash(hash);
                    return 'second is set'
                })
            );
            /*
            ... More push() calls ...
             */
            
            return promises;
        }
        catch (error) {
            console.log(error);
            return [];
        }       
}

const handleSubmit = () => {
    Promise.all(hashAnswers())
        .then(result => {
            console.log(result);
        })
}

Note that in the event of an error, hashAnswers returns an empty array just so Promise.all can resolve, but you will see the error message via console.log(error);