I am facing a problem of fetching data (React, useEffect)

Question

I am trying to fetch data from the URL given below, sometimes I am getting but most of the time not in the console. I don't know about the problem I have tried with async-await but the result was the same.

https://quiet-forest-82433.herokuapp.com/myorders/[email protected]

My code is:

const {user} = useAuth();
const [totalCart, setTotalCart] = useState({})

useEffect(() => {
    const url = `https://quiet-forest-82433.herokuapp.com/myorders/?email=${user?.email}`
    fetch(url)
        .then(res => res.json())
        .then(data =>  console.log(data))
}, []);

Answer 1

useEffect should have a dependency on user. And don't call fetch until you have a valid user email. Currently, you're code will ask for email=undefined until the user populates, but the useEffect() will not fire again because there is no dependency on user.

useEffect(() => {
    if (!user || !user.email) return

    const url = `https://quiet-forest-82433.herokuapp.com/myorders/?email=${user?.email}`
    fetch(url)
        .then(res => res.json())
        .then(data =>  console.log(data))
}, [user]);