Add warning for rendering into container that was updated manually

scripts/fiber/tests-passing.txt

@@ -667,6 +667,10 @@ src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js
 * should not onMouseLeave when staying in the portal
 * should not update event handlers until commit
 * should not crash encountering low-priority tree
+* should not warn when rendering into an empty container
+* should warn when replacing a container which was manually updated outside of React
+* should warn when doing an update to a container manually updated outside of React
+* should warn when doing an update to a container manually cleared outside of React
 * throws if non-element passed to top-level render
 * throws if something other than false, null, or an element is returned from render
 * treats mocked render functions as if they return null

src/renderers/dom/fiber/ReactDOMFiberEntry.js

@@ -73,8 +73,12 @@ findDOMNode._injectFiber(function(fiber: Fiber) {
 });
 
 type DOMContainer =
-  | (Element & {_reactRootContainer: ?Object})
-  | (Document & {_reactRootContainer: ?Object});
+  | (Element & {
+    _reactRootContainer: ?Object,
+  })
+  | (Document & {
+    _reactRootContainer: ?Object,
+  });
 
 type Container = Element | Document;
 type Props = {
@@ -531,6 +535,21 @@ function renderSubtreeIntoContainer(
   );
 
   if (__DEV__) {
+    if (container._reactRootContainer && container.nodeType !== COMMENT_NODE) {
+      const hostInstance = DOMRenderer.findHostInstance(
+        container._reactRootContainer.current,
+      );
+      if (hostInstance) {
+        warning(
+          hostInstance.parentNode === container,
+          'render(...): It looks like the React-rendered content of this ' +
+            'container was removed without using React. This is not ' +
+            'supported and will cause errors. Instead, call ' +
+            'ReactDOM.unmountComponentAtNode to empty a container.',
+        );
+      }
+    }
+
     const isRootRenderedBySomeReact = !!container._reactRootContainer;
     const rootEl = getReactRootElementInContainer(container);
     const hasNonRootReactChild = !!(rootEl &&

src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js

@@ -1004,6 +1004,81 @@ describe('ReactDOMFiber', () => {
         container,
       );
     });
+
+    it('should not warn when rendering into an empty container', () => {
+      spyOn(console, 'error');
+      ReactDOM.render(<div>foo</div>, container);
+      expect(container.innerHTML).toBe('<div>foo</div>');
+      ReactDOM.render(null, container);
+      expect(container.innerHTML).toBe('');
+      expectDev(console.error.calls.count()).toBe(0);
+      ReactDOM.render(<div>bar</div>, container);
+      expect(container.innerHTML).toBe('<div>bar</div>');
+      expectDev(console.error.calls.count()).toBe(0);
+    });
+
+    it('should warn when replacing a container which was manually updated outside of React', () => {
+      spyOn(console, 'error');
+      // when not messing with the DOM outside of React
+      ReactDOM.render(<div key="1">foo</div>, container);
+      ReactDOM.render(<div key="1">bar</div>, container);
+      expect(container.innerHTML).toBe('<div>bar</div>');
+      // then we mess with the DOM before an update
+      // we know this will error - that is expected right now
+      // It's an error of type 'NotFoundError' with no message
+      expect(() => {
+        container.innerHTML = '<div>MEOW.</div>';
+        ReactDOM.render(<div key="2">baz</div>, container);
+      }).toThrowError();
+      expectDev(console.error.calls.count()).toBe(1);
+      expectDev(console.error.calls.argsFor(0)[0]).toContain(
+        'render(...): ' +
+          'It looks like the React-rendered content of this container was ' +
+          'removed without using React. This is not supported and will ' +
+          'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
+          'to empty a container.',
+      );
+    });
+
+    it('should warn when doing an update to a container manually updated outside of React', () => {
+      spyOn(console, 'error');
+      // when not messing with the DOM outside of React
+      ReactDOM.render(<div>foo</div>, container);
+      ReactDOM.render(<div>bar</div>, container);
+      expect(container.innerHTML).toBe('<div>bar</div>');
+      // then we mess with the DOM before an update
+      container.innerHTML = '<div>MEOW.</div>';
+      ReactDOM.render(<div>baz</div>, container);
+      // silently fails to update
+      expectDev(console.error.calls.count()).toBe(1);
+      expectDev(console.error.calls.argsFor(0)[0]).toContain(
+        'render(...): ' +
+          'It looks like the React-rendered content of this container was ' +
+          'removed without using React. This is not supported and will ' +
+          'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
+          'to empty a container.',
+      );
+    });
+
+    it('should warn when doing an update to a container manually cleared outside of React', () => {
+      spyOn(console, 'error');
+      // when not messing with the DOM outside of React
+      ReactDOM.render(<div>foo</div>, container);
+      ReactDOM.render(<div>bar</div>, container);
+      expect(container.innerHTML).toBe('<div>bar</div>');
+      // then we mess with the DOM before an update
+      container.innerHTML = '';
+      ReactDOM.render(<div>baz</div>, container);
+      // silently fails to update
+      expectDev(console.error.calls.count()).toBe(1);
+      expectDev(console.error.calls.argsFor(0)[0]).toContain(
+        'render(...): ' +
+          'It looks like the React-rendered content of this container was ' +
+          'removed without using React. This is not supported and will ' +
+          'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
+          'to empty a container.',
+      );
+    });
   }
 });
 

src/renderers/dom/shared/__tests__/ReactDOMTextComponent-test.js

@@ -120,6 +120,8 @@ describe('ReactDOMTextComponent', () => {
     ReactDOM.render(reactEl, el);
     expect(el.textContent).toBe('foobarbaz');
 
+    ReactDOM.unmountComponentAtNode(el);
+
     reactEl = <div>{''}{''}{''}</div>;
     el.innerHTML = ReactDOMServer.renderToString(reactEl);
 

src/renderers/dom/shared/__tests__/ReactMount-test.js

@@ -12,6 +12,7 @@
 'use strict';
 
 const ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
+const {COMMENT_NODE} = require('HTMLNodeType');
 
 const invariant = require('invariant');
 
@@ -371,7 +372,7 @@ describe('ReactMount', () => {
         containerDiv = document.createElement('div');
         containerDiv.innerHTML = 'A<!-- react-mount-point-unstable -->B';
         mountPoint = containerDiv.childNodes[1];
-        invariant(mountPoint.nodeType === 8, 'Expected comment');
+        invariant(mountPoint.nodeType === COMMENT_NODE, 'Expected comment');
       });
 
       it('renders at a comment node', () => {

src/renderers/shared/fiber/ReactFiberTreeReflection.js

@@ -25,10 +25,11 @@ if (__DEV__) {
 }
 
 var {
-  HostRoot,
+  ClassComponent,
   HostComponent,
+  HostRoot,
+  HostPortal,
   HostText,
-  ClassComponent,
 } = require('ReactTypeOfWork');
 
 var {NoEffect, Placement} = require('ReactTypeOfSideEffect');
@@ -241,8 +242,7 @@ exports.findCurrentHostFiber = function(parent: Fiber): Fiber | null {
   while (true) {
     if (node.tag === HostComponent || node.tag === HostText) {
       return node;
-    } else if (node.child) {
-      // TODO: If we hit a Portal, we're supposed to skip it.
+    } else if (node.child && node.tag !== HostPortal) {
       node.child.return = node;
       node = node.child;
       continue;