If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

### Description

React hot loader seems to re-render the entire tree of components when just one component has been changed. It also does this when you make use of multiple apps, each with their own separate roots.

### Expected behavior

From my understanding, only the components that were updated should be changed, not unrelated apps or sibling components.

### Actual behavior

Consider the GIFs below (this example just uses one container with twol apps inside of it; see the code at the bottom of this post):


Here i'm using two apps with a shared parent, adjusting each components background colour. I'm using [why did you update](https://github.com/maicki/why-did-you-update) to check this in the logger, and it shows that both apps are updated when only one component has been altered. This is what the output is in the console:


In case this is a false positive: this is also evident in react dev tools with highlight updates:


This seems to be the most related issue I could find from the posted issues:

https://github.com/gaearon/react-hot-loader/issues/508

The reason I'm bringing this up is performance. The example here is trivial to make it obvious what's going on. In large scale projects, with 100s of components, I've found that this causes hot reloading to tank chrome's performance, with it taking several seconds to complete a simple style change. This is of course a big downer on productivity. Is this just how react-hot-loader is supposed to work? If so, why?
I've checked out your documentation, but nothing comes up about it. I'm currently mitigating for it by just rendering the current app I'm working on to the browser.

### Environment

React Hot Loader version: 4.3.1

Run these commands in the project folder and fill in their results:

1. `node -v`:10.1.0
2. `npm -v`: 6.0.1

1. Operating system: Windows 10
2. Browser and version: Chrome Canary 69.0.3453.0

### Reproducible Demo

This is the example code being used. It was ran with webpack-dev-server.

```
// app-one.js

import React from "react";
import { hot } from "react-hot-loader";

function AppOne() {
return

I am app one

;
}

export default hot(module)(AppOne);

// app-two.js

import React from "react";
import { hot } from "react-hot-loader";
function AppTwo() {
return

I am app two

;
}

export default hot(module)(AppTwo);

// Root.js

import React from "react";
import AppOne from "./AppOne";
import AppTwo from "./AppTwo";
import { hot } from "react-hot-loader";

const Root = () => (




);

export default Root;

// index.js

import React from "react";
import { render } from "react-dom";

import Root from "./Root";

import { whyDidYouUpdate } from "why-did-you-update";

whyDidYouUpdate(React);

render(, document.getElementById("root"));
```

And this is the babelrc :

```
{
"presets": [
[
"latest", {
"es2015": {
"modules": false
}
}
],
["react"]
],
"plugins": [
"react-hot-loader/babel"
]
}
```

I've also replicated this with classes, using PureComponent vs Component, using componentShouldUpdate -> false, and having each app in its own container. It's the same in all cases. In my current setup I'm doing server-side rendering so I've also replicated it with ReactDOM.hydrate. I just used babel 6 for this example, but it also happens with babel 7.