When debugging my React Application using Chrome / React Developer Tools, I see two instances of my Application. Has anyone experienced this? Is it actually rendering two instances or is it just a developer bug?
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
Is my entire App.js, with App having a single export.
I ran into the same issue when setting my react application up from scratch with babel and webpack.
I viewed page source from the browser and it turned out I included two script tags in the index.html file. I think that was because I included the first script tag manually referencing '/bundle.js'. When you run webpack dev server, it automatically includes it for you.
<!doctype html>
<head>
<meta charset="utf-8"/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
so make sure your index.html looks this way before you run webpack-dev-server
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With