firestore get and show data with react

Hey guys im trying to show the data I i get from firestore. when im saving the code in the IDE and im in the current page, its work. but if than I go to another page/refresh the browser - it dosesnt render/render in time and render the "hold" set him to return the code:

import React, { useState, useEffect } from 'react'  import firebase from 'firebase';  import { useAuth } from '../contexts/AuthContext';    export default function Cart() {        const [userMail, setUserMail] = useState(undefined)      const [userCart, setUserCart] = useState(undefined)      const user = useAuth()      const userDoc = firebase.firestore().collection("cart").doc(userMail)        useEffect(() => {          if (user.currentUser) {              setUserMail(user.currentUser.email, console.log(userMail))              userDoc.get().then((doc) => {                  if (doc.exists) {                      let cart = doc.data()                      setUserCart(cart)                  }              })          }      }, [])          if (userCart === undefined) return <h1>hold</h1>      const { item } = userCart      console.log(item);      return (          <main className="main-cart">  //here im try to make sure it got the data befor render//              {item && item.map(item => {                  return (                      <div key={item.itemId}>                          <h3>{item.name}</h3>                      </div>                  )              })}          </main>      )  }  

https://stackoverflow.com/questions/65545733/firestore-get-and-show-data-with-react January 03, 2021 at 09:06AM