Making two requests in useEffect

Question

I am trying to fetch some user data from Firebase using getDoc and some data from MongoDB using axios in React.js.

Code:

async function getSolvedProblems() {
  const docRef = await doc(db, "users-progress", user.uid);
  await getDoc(docRef).then((doc) => {
    console.log(doc.data());
  });
}

useEffect(() => {
  //fetch user's solved problems from firebase
  getSolvedProblems();

  //fetch problems from db server
  axios
    .get(process.env.REACT_APP_BACKEND_URL)
    .then((res) => {
      //doing something here
    })
    .catch((err) => {
      console.log(err);
    });
}, []);

But I don't know why the firebase data is not getting logged in console, when I hit refresh. But when I make any change in code, and save it, then it gets logged. I am unable to understand how useEffect is working here.

Answer 1

This is use effect work on below:

useEffect(() => {
    //Runs only on the first render
}, []);

Also, you need to handle the catch block in your getSolvedProblems() method, see is there any error there.

On my guess, there is no value on user.uid when you load on page render