Inconsistent DOM with lazy and Suspense

[chrisvasz]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Given code like this:

let { which } = this.state;
let Component = () => null;
if (which === 1) Component = LazyOne;
if (which === 2) Component = LazyTwo;
return (
  <Suspense fallback={<span>loading...</span>}>
    <Component />
  </Suspense>
);

when this.state.which === 1 and I run this.setState({ which: 2 }), I should see the DOM change from the nodes rendered by LazyOne to the nodes rendered by LazyTwo. Instead, I see DOM nodes for both.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://jsfiddle.net/o2gmd9wk/1/ (watch the output panel)

What is the expected behavior?

The DOM should match my React component tree.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Tested on Windows, Chrome 71 and React 16.6.1.

[acdlite]

This was fixed by #14133

[acdlite]

We'll release a patch soon. Thanks for the report!