dataLoaded state only changed after page reloaded

Question

I'm doing an API call to get some data. then I keep a useState called dataLoaded. on a successful API call I make the dataLoaded=true. but to see it changed I have to reload the page. following is my code.

const [dataLoaded, setDataLoaded] = useState(false)

    useEffect(() =>{
        const url = `${process.env.REACT_APP_DEV_BASE_URL}/v1/movie/`+ path.eventId + `/venue/`+ path.venue +`/showtime`;
        const requestOptions = (token) => {
          return ({
          method: 'GET',
          headers: { 'Content-Type': 'application/json', 'client_token': '4ece-9e89-1b6d4d2cbb61' }
          })
        };
        const fetchData = async () => {
          try {
            const response = await fetch(url, requestOptions());
            const json =  await response.json();
            // console.log(json);
            // console.log(json.data.venueDateShowtime)
            setShowTimes(json.data.dateShowtimes[0].showtimes[0]);
            console.log(json.data.dateShowtimes[0].date)
            setShowdate(json.data.dateShowtimes[0].date);
            setDataLoaded(true);
            console.log(dataLoaded)
            console.log(showTimes.showtimeId)
            console.log(showdate)
            if(dataLoaded){
                getSeatsArrangement();
            }
            console.log('jjjj')
          }
          catch (error) {
            console.log("error",error);
          }
        };
        fetchData();

      },[]);

      const getSeatsArrangement = async () => {
        const requestOptions = (token) => {
            return ({
            method: 'GET',
            headers: { 'Content-Type': 'application/json', 'client_token': '4ece-9e89-1b6d4d2cbb61' }
            })
          };
        console.log(showTimes.showtimeId)
        console.log(showdate)
        try{
            const url = `${process.env.REACT_APP_DEV_BASE_URL}/v1/seat?venueId=` + path.venue + `&movieId=`+ path.eventId +`&showtimeId=1011&movieDate=2022-10-11`;
            const response = await fetch(url,requestOptions());
            const json = await response.json();
            console.log(json)
            setReservedSeats(json.data.reservedSeats.reservedSeat)
            setNonReservedSeats(json.data.reservedSeats.nonReservedSeats)
            console.log(reservedSeats)
            console.log(nonReservedSeats)
        } catch(error) {
            console.log("error",error);
        }
    }

Console logs when page loads

Answer 1

What is the aim of the code? fetchData is performed once after page loading (because of using ,[] at the end of useeffect.

And a remark: If you log your state right after setting it, the previous value will be shown! you should define another useeffect with your state as dependency (for each state) and log your state in there.

useEffect(() => {
    console.log(dataLoaded)
    if(dataLoaded){
        getSeatsArrangement();
    }
    console.log('jjjj')
}, [dataLoaded]);

useEffect(() => {
    console.log(showTimes.showtimeId)
}, [showTimes]);

useEffect(() => {
    console.log(showdate)  
}, [showdate]);

useEffect(() =>{
    const url = `${process.env.REACT_APP_DEV_BASE_URL}/v1/movie/`+ path.eventId + `/venue/`+ path.venue +`/showtime`;
    const requestOptions = (token) => {
      return ({
      method: 'GET',
      headers: { 'Content-Type': 'application/json', 'client_token': '4ece-9e89-1b6d4d2cbb61' }
      })
    };
    const fetchData = async () => {
      try {
        const response = await fetch(url, requestOptions());
        const json =  await response.json();
        // console.log(json);
        // console.log(json.data.venueDateShowtime)
        setShowTimes(json.data.dateShowtimes[0].showtimes[0]);
        console.log(json.data.dateShowtimes[0].date)
        setShowdate(json.data.dateShowtimes[0].date);
        setDataLoaded(true);

      }
      catch (error) {
        console.log("error",error);
      }
    };
    fetchData();

  },[]);