My component is rendering twice because of Strict Mode

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).

If you have StrictMode enabled in your app but don't remember enabling it, it might be because you used create-react-app or similar to create your app initially, which automatically enables StrictMode by default.

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

 ReactDOM.render( <React.StrictMode> {app} </React.StrictMode>, document.getElementById('root') ); 

If so, you can disable StrictMode by removing the <React.StrictMode> tag:

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

Yes you have to remove Strict mode as

Strict mode can't automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions: Class component constructor , render , and shouldComponentUpdate methods.

Source: React Docs: Strict Mode

For Next.js user here like my-self, strict mode is also enabled by default and causes this issue.

You can disable it in this way

// next.config.js module.exports = { reactStrictMode: false, } 

In a React app with StrictMode:

• If you are seeing dual console logs like this:

• And if you know that StrictMode helps you optimize your app in some way

• And you don't want to disable StrictMode entirely

Then:

The React Developer Tools Chrome Extension offers an option to Hide logs during second render in Strict Mode. To enable that:

• Install the extension.
• In your Chrome Developer Tools window, a new tab called Components is created. Click on it.
• Then click the gear icon inside the components tab.
• Then select the Debugging tab, and check the option to Hide logs during second render in Strict Mode.

You will no more see the dual logs in the console.

If you are using nextjs and you want to disable strict mode go to your next.config.js file and set reactStrictMode to false

module.exports = { reactStrictMode: false, }; 

but strict mode is recommended for development once you check if the double mount is caused by strict mode it's preferable to enable it

I wouldn't remove strict mode as it was enabled in development environment on purpose - to make the app more robust. I had an API call in the component useEffect and I did not want my API to be called twice - even in development - because each API call costs me money. What I ended up doing was to ignore the first call to the API and keep the second call. It worked only this way - trying to keep the first call and ignore the second call did not work and React did not render the DOM that my component returned. In order to do this I used a global variable to count the fetches count:

let globalFetchedCount = 0; 

Then in my useEffect I increased the count and called my API:

useEffect(() => { globalFetchedCount++; callTheApi(globalFetchedCount); }, []); 

In callTheApi function I checked the value of fetchCount:

const callTheApi= async (fetchCount: Number) => { if (fetchCount === 1 && isDev && isWeb) { console.log('skipping fetch in strict mode fetch count 1'); return; } const response = await doFetch(apiUrl); const data = await response.json(); setMyObject(data.myObject); }; 

You need to define isDev and isWeb - in my case this was a React Native application and the problem was only in the web version launched by hitting "w" in Expo console.

const isDev = __DEV__; const isWeb = Platform.OS === 'web'; 

And lastly my component uses MyObject:

export default function MyComponent() { const [myObject, setMyObject] = useState<MyObject[]>([]); ... useEffect(() => { ... }, []} .... // now use myObject return ( <View> ... </View> ); } 

It seems the component renders twice, but the first rendered component is not unmounted? At least that is the behaviour I'm seeing with React 17, might a bug in my code of course