My React Component is rendering twice because of Strict Mode

[riley-dickerson]

I have been reading a bunch of React code and I see stuff like this that I don't understand:

handleChange = field => e => {
  e.preventDefault();
  /// Do something here
}

[anshulkaushik001]

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')
);