Warn if unmounting a tree that was rendered by a different copy of React
Andrew Clark committed
Feb 1, 2017 at 18:46 UTC
87bc7cef2c082b971a89cd68878d2b1801bfa14a
1 file changed
+28
-2
src/renderers/dom/fiber/ReactDOMFiber.js
+28
-2
@@ -108,6 +108,18 @@ function validateContainer(container) {
108
}
109
}
110
111
+function getReactRootElementInContainer(container : any) {
112
+ if (!container) {
113
+ return null;
114
+ }
115
+
116
+ if (container.nodeType === DOC_NODE_TYPE) {
117
+ return container.documentElement;
118
+ } else {
119
+ return container.firstChild;
120
+ }
121
+}
122
+
123
function shouldAutoFocusHostComponent(
124
type : string,
125
props : Props,
@@ -386,9 +398,12 @@ var ReactDOM = {
398
}
399
400
if (__DEV__) {
401
+ const isRootRenderedBySomeReact = Boolean(container._reactRootContainer);
402
+ const isInTreeRenderedByThisReact = ReactDOMComponentTree.getInstanceFromNode(container);
403
+
404
warning(
390
- !ReactDOMComponentTree.getInstanceFromNode(container) ||
391
- container._reactRootContainer,
405
+ !isInTreeRenderedByThisReact ||
406
+ isRootRenderedBySomeReact,
407
'render(...): Replacing React-rendered children with a new root ' +
408
'component. If you intended to update the children of this node, ' +
409
'you should instead have the existing children update their state ' +
@@ -427,7 +442,18 @@ var ReactDOM = {
442
'unmountComponentAtNode(...): Target container is not a DOM element.'
443
);
444
warnAboutUnstableUse();
445
+
446
if (container._reactRootContainer) {
447
+ if (__DEV__) {
448
+ const rootEl = getReactRootElementInContainer(container);
449
+ const renderedByDifferentReact = rootEl && !ReactDOMComponentTree.getInstanceFromNode(rootEl);
450
+ warning(
451
+ !renderedByDifferentReact,
452
+ 'unmountComponentAtNode(): The node you\'re attempting to unmount ' +
453
+ 'was rendered by another copy of React.'
454
+ );
455
+ }
456
+
457
// Unmount should not be batched.
458
return DOMRenderer.unbatchedUpdates(() => {
459
return renderSubtreeIntoContainer(null, null, container, () => {