javascript - fetching random json getting first undefined then result

Question

Beginner on reactjs here, trying to fetch random json, getting the result i want to get, but not the way i want it, for some reason it prints first 'undefined' then after that the result. Why cant i get just the result and without this '?' my code:

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

function App() {
  const [thumbnail, setThumbnail] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/photos")
      .then((response) => response.json())
      .then((json) => {
        setThumbnail(json);
      });
  }, []);

  console.log(thumbnail[0]?.thumbnailUrl);
  return (
    <div className="App">
      <h1>Build</h1>
      <p></p>
    </div>
  );
}

export default App;

Answer 1

console.log() inside App() directly will use the initial state of. thumbnail which is the empty, so it will show undefined.

To check the thumbnail, you should use another useEffect with adding a thumbnail dependency.

useEffect(() => {
  if (thumbnail.length > 0) {
    console.log(thumbnail[0].thumbnailUrl);
  }
}, [thumbnail]);

---

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

function App() {
  const [thumbnail, setThumbnail] = useState([]);
  const [isLoaded, setLoaded] = useState(false);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/photos")
      .then((response) => response.json())
      .then((json) => {
        setLoaded(true);
        setThumbnail(json);
      });
  }, []);

  useEffect(() => {
    if (isLoaded) {
      console.log(thumbnail[0]?.thumbnailUrl);
    }
  }, [thumbnail]);

  return (
    <div className="App">
      <h1>Build</h1>
      <p></p>
    </div>
  );
}

export default App;