diff --git a/packages/react-dom/src/__tests__/ReactDOM-test.js b/packages/react-dom/src/__tests__/ReactDOM-test.js index ffa9c7f7cca19..57455c232671a 100644 --- a/packages/react-dom/src/__tests__/ReactDOM-test.js +++ b/packages/react-dom/src/__tests__/ReactDOM-test.js @@ -525,4 +525,34 @@ describe('ReactDOM', () => { ' in App (at **)', ]); }); + + it('should not remove _reactRootContainer from a root if unmountComponentAtNode is follow by a render', () => { + const containerParent = document.createElement('div'); + const containerApp = document.createElement('div'); + + function App1() { + return
; + } + function App2() { + return
; + } + + class Parent extends React.Component { + render() { + return
; + } + + componentDidMount() { + ReactDOM.render(, containerApp); + ReactDOM.unmountComponentAtNode(containerApp); + ReactDOM.render(, containerApp); + } + } + + ReactDOM.render(, containerParent); + // if null, the next unmountComponentAtNode / render might not behave correctly + // skipping some life cycle like componentWillUnmount of App2 etc. + expect(containerApp._reactRootContainer).not.toBeNull(); + expect(containerApp.innerHTML).toEqual('
'); + }); }); diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index 80029c4fcc983..b14144a761da1 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/packages/react-dom/src/client/ReactDOM.js @@ -564,6 +564,9 @@ function legacyRenderSubtreeIntoContainer( callback, ); } else { + if (root.shouldBeUnMount && children != null) { + root.shouldBeUnMount = false; + } root.render(children, callback); } } @@ -679,9 +682,12 @@ const ReactDOM: Object = { } // Unmount should not be batched. + container._reactRootContainer.shouldBeUnMount = true; DOMRenderer.unbatchedUpdates(() => { legacyRenderSubtreeIntoContainer(null, null, container, false, () => { - container._reactRootContainer = null; + if (container._reactRootContainer.shouldBeUnMount) { + container._reactRootContainer = null; + } }); }); // If you call unmountComponentAtNode twice in quick succession, you'll