Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why do I have two instances of my App in React Dev. Tools?

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?

image

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.

like image 205
Crutio Avatar asked Sep 04 '25 03:09

Crutio


1 Answers

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

like image 90
Tochukwu Ali Avatar answered Sep 06 '25 10:09

Tochukwu Ali