React useEffect double output

Question

I am asking myself why I get the console log output twice when I open the web app. I dont feel I have to call twice the server if I only need to do it once. I cant figure out why this happens.

useEffect(() => {
        const myHeaders = new Headers();

        myHeaders.append('Content-Type', 'application/json');
        myHeaders.append('Authorization', 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJlcm5lc3RvZGVvcm96Y28iLCJyb2xlcyI6WyJST0xFX1VTRVIiXSwiaXNzIjoiaHR0cDovL2xvY2FsaG9zdDo1MDAwL2xvZ2luIiwiZXhwIjoxNjYyNTgxOTQ4fQ.uBwVEzLvdXHmbStCxgegDs-7dMBpnECf0T7AyRd6MjI');

        fetch('http://localhost:5000/org/activity/getallcategories', {
            method: 'GET',
            headers: myHeaders,
        })
            .then((response) => response.json())
            .then((data) => console.log(data)) //I see this output twice in the console
    }

    ,[])

Bijay Poudel · Answer

StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which can be quite useful).

For example, you might find that your {app} is wrapped by in your index.js:

  ReactDOM.render(
     
       {app}
     ,
    document.getElementById('root')
  );

If so, you can disable StrictMode by removing the tag:

  ReactDOM.render(
    {app}
    document.getElementById('root')
  );

React useEffect double output

1 Answers