Only reuse server-rendered React nodes if there are no unexpected siblings

src/browser/server/__tests__/ReactServerRendering-test.js

@@ -206,11 +206,11 @@ describe('ReactServerRendering', function() {
         <TestComponent name="x" />
       );
       ExecutionEnvironment.canUseDOM = true;
-      element.innerHTML = lastMarkup + ' __sentinel__';
+      element.innerHTML = lastMarkup;
 
       React.render(<TestComponent name="x" />, element);
       expect(mountCount).toEqual(3);
-      expect(element.innerHTML.indexOf('__sentinel__') > -1).toBe(true);
+      expect(element.innerHTML).toBe(lastMarkup);
       React.unmountComponentAtNode(element);
       expect(element.innerHTML).toEqual('');
 

src/browser/ui/ReactMount.js

@@ -468,6 +468,24 @@ var ReactMount = {
     var containerHasReactMarkup =
       reactRootElement && ReactMount.isRenderedByReact(reactRootElement);
 
+    if (__DEV__) {
+      if (!containerHasReactMarkup || reactRootElement.nextSibling) {
+        var rootElementSibling = reactRootElement;
+        while (rootElementSibling) {
+          if (ReactMount.isRenderedByReact(rootElementSibling)) {
+            console.warn(
+              'render(): Target node has markup rendered by React, but there ' +
+              'are unrelated nodes as well. This is most commonly caused by ' +
+              'white-space inserted around server-rendered markup.'
+            );
+            break;
+          }
+
+          rootElementSibling = rootElementSibling.nextSibling;
+        }
+      }
+    }
+
     var shouldReuseMarkup = containerHasReactMarkup && !prevComponent;
 
     var component = ReactMount._renderNewRootComponent(

src/browser/ui/__tests__/ReactMount-test.js

@@ -120,4 +120,28 @@ describe('ReactMount', function() {
 
     expect(instance1 === instance2).toBe(true);
   });
+
+  it('should warn if mounting into dirty rendered markup', function() {
+    var container = document.createElement('container');
+    container.innerHTML = React.renderToString(<div />) + ' ';
+
+    console.warn = mocks.getMockFunction();
+    ReactMount.render(<div />, container);
+    expect(console.warn.mock.calls.length).toBe(1);
+
+    container.innerHTML = ' ' + React.renderToString(<div />);
+
+    console.warn = mocks.getMockFunction();
+    ReactMount.render(<div />, container);
+    expect(console.warn.mock.calls.length).toBe(1);
+  });
+
+  it('should not warn if mounting into non-empty node', function() {
+    var container = document.createElement('container');
+    container.innerHTML = '<div></div>';
+
+    console.warn = mocks.getMockFunction();
+    ReactMount.render(<div />, container);
+    expect(console.warn.mock.calls.length).toBe(0);
+  });
 });