I have a problem with one of my components. The problem I think I have is that my component executes before my user context stores the currentUser. My code only works when doing a hot reload.

The watchlist component gets all the values from the watchlist array where the document matches the currentUser.uid.

UserContext.js:

  const [currentUser, setCurrentUser] = useState(null)
  const [watchlist, setWatchlist] = useState(null)

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      setCurrentUser(user)
    })
    return unsubscribe
  }, [])

  const getWatchlist = async () => {
      const userRef = await getDoc(doc(db, 'users', currentUser.uid))
      setWatchlist(userRef.data().watchlist)
      console.log(userRef.data().watchlist)
  }

These values are the ids of objects I then GET from an API, these are then pushed to the watchlistData array.

CryptoContext.js

export const getWatchlistData = async (list) => {
  const watchlistData = []
  for (const item of list) {
    const result = await axios.get(
      `${coingecko}/coins/${item}`
    )
    watchlistData.push(result.data)
  }

  return watchlistData
}

And this is how my Watchlist component code currently looks.

WatchlistItems.jsx

  const { watchlist, getWatchlist, currentUser } = useContext(UserContext)
  const { dispatch } = useContext(CryptoContext)

  useEffect(() => {
    if (currentUser) {
    dispatch({type: 'SET_LOADING'})
    const getWatchlistDataFromAPI = async () => {
      await getWatchlist()
      const watchlistData = await getWatchlistData(watchlist)
      dispatch({type: 'GET_WATCHLIST', payload: watchlistData})
      console.log(watchlistData)
    }
    getWatchlistDataFromAPI()
    }
  }, [currentUser])

If I refresh the page I get "Uncaught (in promise) TypeError: the list is not iterable", but if I do a hot reload, watchlist, and watchlistData both console.log with the correct data.

This is my first post and so please let me know if I've left anything out.

Thank you in advance for any help :)