Javascript then not waiting for async function react

I’m trying to set the background of my React App to the nasa APOD.

import './App.css';
import React, { useState, useEffect } from "react";

const apiKey = process.env.REACT_APP_NASA_KEY;

function App() {
  const [bg, setBg] = useState(null);

  async function fetchPhoto() {
    const dat = await fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}`);
    const data = await dat.json();
    setBg(data); 
  }

  useEffect(() => {
    fetchPhoto().then(() => {
      document.body.style.backgroundImage = `url('${bg.url}')`
    })
  }, [])

  return null;
}

However, in this code then does not wait for the state to be set and I get the error:
App.js:22 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'url') at App.js:22:1

What am I doing wrong? Thanks

>Solution :

1. Solution

A simpler way to achieve what you want is by doing like below, this way you don’t have to menage asynchronous tasks like you are doing:

import './App.css';
import React, { useState, useEffect } from "react";

const apiKey = process.env.REACT_APP_NASA_KEY;

function App() {
  const [bg, setBg] = useState(null);

  async function fetchPhoto() {
    const dat = await fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}`);
    const data = await dat.json();
    setBg(data); 
  }
  
  useEffect(() => {
    fetchPhoto()
  }, [])

  useEffect(() => {
    if(bg){
      document.body.style.backgroundImage = `url('${bg.url}')`;
    }
  }, [bg])

  return null;
}

2. Explanation

Your code is not working because just after fetchPhoto() is executed and resolved, React did not yet re-render the components (update the state), therefore bg is still null.