unmountComponentAtNode works async ? #13690
Description
Do you want to request a feature or report a bug?
bug
What is the current behavior?
i tried to use ReactDOM.unmountComponentAtNode and ReactDOM.render to manage my multi roots. i found that if i use them in sync code, i get an error just like this when i change route pages:
Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. Instead, have the parent component update its state and rerender in order to remove this component.
Warning: render(...): Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render.
i use browserHistory to change route.
my code is written in componentDidMount method of a root React component:
Page1.js
componentDidMount() {
const a = document.getElementById('root2');
ReactDOM.unmountComponentAtNode(a);
ReactDOM.render(
<A />,
a
);
ReactDOM.render(
<B />,
document.getElementById('root3')
);
}
Page2.js
componentDidMount() {
const a = document.getElementById('root2');
ReactDOM.unmountComponentAtNode(a);
ReactDOM.render(
<C />,
a
);
ReactDOM.render(
<B />,
document.getElementById('root3')
);
}
And then, if i use setTimeout to wrap ReactDOM.render after ReactDOM.unmountComponentAtNode(a);, the result can be success.
What is the expected behavior?
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
react 16.5.2
react-dom 16.5.2