0

I don't know how to describe title properly this time.

I am fetching data from google sheet API sheetson and the component render at least 2 times. Because I see it log() 2 times in the console. And also the images from API shows significant loading latency. So, I was wondering is it because of my implementation of the code.

console.log() result:
console.log() result

const [busInfo, setBusInfo] = useState([]);

console.log(busInfo);

// get the data from google sheet
useEffect(() => {
  (async function fetchBusInfo() {
    const response = await fetch(url, {
      headers: {
        Authorization: `Bearer ${apiKey}`,
        "X-Spreadsheet-Id": `${sheetID}`,
      },
    });

    const data = await response.json();

    setBusInfo(data.results);
  })(); // IIFE
}, []);
player0
  • 124,011
  • 12
  • 67
  • 124
Htet
  • 27
  • 1
  • 4
  • @romellem, Thank you. Yes, this helps. React strict mode is showing this on dev server. After I removed it, the log only called once. But, I am still having latency issue in loading images. I guess this will be related with google sheet. Thanks again. I will close this now. – Htet Sep 04 '22 at 14:37

0 Answers0