useEffect function triggers multiple times

Question

I'm trying to fetch data from a local json-server and display it in a list using react.

From my understanding the useEffect should trigger a console log twice in this instance. One empty return for the countries and one populated one.

If someone is able to let me know why this console.log get's triggered so often I'd be really thankful.

The react code:

import React, { useEffect, useState } from 'react'

export default function CountryList() {

  const [countries, setCountries] = useState([])

  useEffect(() => {
    fetch('http://localhost:3001/countries')
      .then(res => res.json())
      .then(data => setCountries(data))
      
    }, [])
    
    console.log(countries)

  return (
    <div>
      <h2>CountryList</h2>

      <ul>
        {countries.map(country => (
          <li key={country.name}>{country.name}</li>
        ))}
      </ul>
    </div>
  )
}

The console however returns the following:

The json-server get's this list of countries:

{
  "countries": [
    { 
      "name": "Austria", 
      "code": "AT", 
      "language": "german",
      "cities": {
        "Vienna": {
          "population": "8.3 million",
          "latitude": "48.208174",
          "longitude": "16.373819"
        },
        "Graz": {
          "population": "1.5 million",
          "latitude": "47.070713",
          "longitude": "15.439186"
        }
      },
      "currency": {
        "code": "EUR",
        "name": "Euro",
        "symbol": "€"
      }
    },

    {
      "name": "Greece", 
      "code": "GR", 
      "language": "greek",
      "cities": {
        "Athens": {
          "population": "2.7 million",
          "latitude": "37.983810",
          "longitude": "23.727539"
        },
        "Thessaloniki": {
          "population": "1.5 million",
          "latitude": "40.633125",
          "longitude": "22.944406"
        },
        "Patras": {
          "population": "1.5 million",
          "latitude": "38.244818",
          "longitude": "21.738050"
        }
      },
      "currency": {
        "code": "EUR",
        "name": "Euro",
        "symbol": "€"
      }
    }
  ]
}

Are you using StrictMode in index.js file, if yes then remove it — Mridul Gupta, Aug 05 '22 at 10:15
@MridulGupta read question correctly OP is asking why both console.log have same result, also disabling strictmode is stupid — bogdanoff, Aug 05 '22 at 10:17
This thread might help https://stackoverflow.com/questions/72238175/react-18-useeffect-is-getting-called-two-times-on-mount @lechnerio. — Youssouf Oumar, Aug 05 '22 at 10:19
I think request was cached, may be thats why happened quickly ?. try checking "disable cache" in network tab of dev tools. — bogdanoff, Aug 05 '22 at 10:21
@bogdanoff you need to read it carefully, as far as I know, he is saying console.log should be printed only 2 times, once for the empty array and once when the data is fetched and the state is populated and his follow-up is why so many console.log's are getting triggered — Mridul Gupta, Aug 05 '22 at 10:22
@MridulGupta how does disabling strictmode helps, it might stop showing 2 times but he'll lose may advantage of it. — bogdanoff, Aug 05 '22 at 10:24

score 0 · Answer 1 · answered Aug 05 '22 at 10:39

Avoid having console.log outside of any function. As react native life-cycle mount and re-mount happen when dom changes. Best way to check state value is as follows.

useEffect(() => {
    // this logs when countries array changes.
    console.log(countries)      
}, [countries])

useEffect function triggers multiple times

1 Answers1