Implementing multiple Firestore calls at different times within useEffect React hook

Question

useEffect(async() => {
await getWord();
const interval = setInterval(() =>{
time2 = time2 - 1;
        if (time2 == 0) {
clearInterval(interval);
          let dataURL = canvasRef.current.toDataURL();
          const db = firebase.firestore();
          db.collection("rooms").where("code", "==", code).get().then((querySnapshot) => {
            querySnapshot.docs.forEach((snapshot) => {
              snapshot.ref.collection("rounds").where("round", "==", round).get().then((querySnapshot) => {
                querySnapshot.docs.forEach((snapshot) => {
                  snapshot.ref.collection("pictures").add({artist: name, dataURL: dataURL, votes: 0}).then(() => {
                    setVoteTime2(true);
                  });
                });
              });
            });
          });
        }
    }, 1000);
}, []);

I am getting error with above useEffect hook. getWord is a function that implements a firestore call. The error is: "TypeError: n is not a function" and it's involving the firestore function that occurs in getWord, and the firestore call that occurs if time2 == 0. How can I get both asynchronous calls to occur, with obviously the firestore call that takes place inside getWord occurring before the call when time2 == 0? Please let me know if more info is needed! I just don't understand how using await is not solving this issue.

For starters, the function passed to useEffect can't be async. The effect function must return either nothing (undefined) or a cleanup function. Async functions return Promises. I haven't looked at your code closely but it's possible that the "not a function" error is the result of react trying to call your promise as a cleanup function. — ray
– ray, Commented Aug 22, 2020 at 6:57
I tried getting rid of that "async", but now it won't let me use keyword "await", even though I've already labeled "getWord" as "async".... — watersheep23
– watersheep23, Commented Aug 22, 2020 at 7:03
Define a new async function inside the effect function and call that. — ray
– ray, Commented Aug 22, 2020 at 7:09
Can you clarify what you're trying to do here? Why are you calling setInterval? What is time2? If you're just trying to do two async calls in order, await the first one and then call the second one, or chain them with .then(). — ray
– ray, Commented Aug 22, 2020 at 7:10
@jalunceford you cannot use await keyword if the function is not defined as async — Mukul Kumar Jha
– Mukul Kumar Jha, Commented Aug 22, 2020 at 7:13

Mukul Kumar Jha · Accepted Answer · 2020-08-22 07:16:44Z

1

You cannot pass async function as callback inside the useEffect hook because it returns Promise which is not allowed. Simply try calling your function in the useEffect (but don't define the callback function as async itself), and inside that function perform your asynchronous tasks...

useEffect(() => {

    // call your function
myAsyncFunc(); <--- Here
    
async function myAsyncFunc () => {
await getWord();
const interval = setInterval(() =>{
time2 = time2 - 1;
        if (time2 == 0) {
clearInterval(interval);
          let dataURL = canvasRef.current.toDataURL();
          const db = firebase.firestore();
          db.collection("rooms").where("code", "==", code).get().then((querySnapshot) => {
            querySnapshot.docs.forEach((snapshot) => {
              snapshot.ref.collection("rounds").where("round", "==", round).get().then((querySnapshot) => {
                querySnapshot.docs.forEach((snapshot) => {
                  snapshot.ref.collection("pictures").add({artist: name, dataURL: dataURL, votes: 0}).then(() => {
                    setVoteTime2(true);
                  });
                });
              });
            });
          });
        }
    }, 1000);
}


}, []);

What it does is saves you from returning a Promise but still lets you perform all your async tasks

edited Aug 22, 2020 at 7:16

answered Aug 22, 2020 at 7:08

Mukul Kumar Jha

1,0828 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

watersheep23 Over a year ago

"async myAsyncFunc () => {" syntax is incorrect I think... But I see what you guys are saying, this makes sense, I will try defining an async function inside useEffect and then just call it

watersheep23 Over a year ago

It worked, you guys are awesome, great idea to just create a new async function with everything in it and call it inside useEffect hook

Collectives™ on Stack Overflow

Implementing multiple Firestore calls at different times within useEffect React hook

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related