Random unmounts with code splitting

[theKashey]

The code

const Component1 = () => {}
const Component2 = () => <Component1 />

export default Component1
export {
  Component2
}

Component1 and default export has the same types, but, was registered by different names twice.

import Component3 from './Component1';
export default Component3;

Component3 is still the same, but yet again has a "named" Proxy.

The problem

You got 3 "same" components, which were the same only in the beginning, but now all are unique ProxyFacades.

React hot loader will call getProxyByType passing the type to get the proxy. And only one name is associated by type - the last one.

During the code splitting one could touch a new code and move "the last one" to a new "name", thus a new ProxyFacade.

Just next loading of async chunk will trigger sub render to reconcile trees, it will found "a very similar components", and update existing components... resulting unmount, as long component type did change.

The fix

Only one ProxyFacade should be created for any Component. Also doable if we will not .register variables at all, but it will break loadable-components HMR (@neoziro).

I am thinking about extracting type comparison from reconsiler and using it inside .register

[theKashey]

We already "fixed" it - https://github.com/gaearon/react-hot-loader/blob/master/src/proxy/createClassProxy.js#L62
But we do break the fix.