useEffect fetch request is pulling data twice

Admin 1
Viewed 325

What I Want:

I'm pulling data from an api, then setting the data to state. I've done this inside a useEffect hook, but when I console.log the data afterwards, it's displaying the data twice, sometimes 4 times. I'm at a loss as to why this is happening.

What I've Tried:

  • console.log within useEffect to see data from source
  • disabling react developer tools within chrome.

My Code:

// make api call, assign response to data state
const [apiData, setApiData] = useState();

useEffect(() => {
    async function fetchData() {
      try {
        await fetch('https://restcountries.com/v3.1/all')
        .then(response => response.json())
        .then(data => setApiData(data));
      } catch (e) {
        console.error('Error fetching api data', e);
      };
    };
    fetchData();
}, []);

console.log(apiData);

Result of console.log:

error screenshot

use-state use-effect reactjs javascript
2 Answers

As was mentioned in the other comment this is due to effects being "double invoked" in strict-mode.

A common solution and one I believe has been suggested by the React team (although am struggling to find where I read this) is to use useRef.

// make api call, assign response to data state
const [apiData, setApiData] = useState();
const hasFetchedData = useRef(false);

useEffect(() => {
    async function fetchData() {
      try {
        await fetch('https://restcountries.com/v3.1/all')
        .then(response => response.json())
        .then(data => setApiData(data));
      } catch (e) {
        console.error('Error fetching api data', e);
      };
    };
    if (hasFetchedData.current === false) {
      fetchData();
      hasFetchedData.current = true;
    } 
}, []);
user_52204890
user_90078760
Related