0

EDIT: mixed up when the log was showing up.

Right now "DONE" is logged before everything is fetched when I expect it to log afterwards. Thus I'm not able to properly use my isLoading state. I still need to setup error handling but I don't think that should matter for now. Any help would be greatly appreciated, thanks!

 const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    async function fetchGames() {
      try {
        setIsLoading(true)
        console.log('FETCHING');
        getPlayableGames().then((gameList) => setGameList(gameList))
        setIsLoading(() => false)
      } catch {
      } finally {
        setIsLoading(false)
        console.log('DONE');
      }
    }
    fetchGames()
  }, [])
Brenden Baio
  • 107
  • 8
  • I mistakenly reversed it. Everything is being logged before the data is fetched and rendered on screen. I'm using throttling to slow the page reload down a bit. – Brenden Baio Jul 31 '23 at 03:05
  • sorry made another edit – Brenden Baio Jul 31 '23 at 03:09
  • 2
    You're mixing async / await with `.then()`, a recipe for confusion. Use `setGameList(await getPlayableGames())` instead to await the result in your async function – Phil Jul 31 '23 at 03:11
  • Ah I feel silly, this worked beautifully thank you! – Brenden Baio Jul 31 '23 at 03:15
  • If you wanna post as answer I can accept it – Brenden Baio Jul 31 '23 at 03:16
  • I've already voted to close as a typo (not that it is exactly a typo but it's such a simple mistake I don't feel it warrants an entire answer). There's probably duplicates around too – Phil Jul 31 '23 at 03:17
  • 1
    Does this answer your question? [using async await and .then together](https://stackoverflow.com/q/55019621/283366) – Phil Jul 31 '23 at 03:18
  • I gocha yeah that one works as well – Brenden Baio Jul 31 '23 at 03:19
  • `isLoading` comes from closure above and will not be updated in the same cycle even with `async/await`. Instead, this flag will be updated during next render run. – skyboyer Jul 31 '23 at 07:42

0 Answers0