Warn if people mutate children.

Author: jimfb

src/isomorphic/classic/element/ReactElement.js

@@ -116,6 +116,12 @@ var ReactElement = function(type, key, ref, self, source, owner, props) {
         writable: false,
         value: self,
       });
+      Object.defineProperty(element, '_shadowChildren', {
+        configurable: false,
+        enumerable: false,
+        writable: false,
+        value: Array.isArray(props.children) ? props.children.slice(0) : props.children,
+      });
       // Two elements created in two different places should be considered
       // equal for testing purposes and therefore we hide it from enumeration.
       Object.defineProperty(element, '_source', {

src/renderers/shared/ReactDebugTool.js

@@ -314,9 +314,11 @@ if (__DEV__) {
   var ReactInvalidSetStateWarningDevTool = require('ReactInvalidSetStateWarningDevTool');
   var ReactHostOperationHistoryDevtool = require('ReactHostOperationHistoryDevtool');
   var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
+  var ReactChildrenMutationWarningDevtool = require('ReactChildrenMutationWarningDevtool');
   ReactDebugTool.addDevtool(ReactInvalidSetStateWarningDevTool);
   ReactDebugTool.addDevtool(ReactComponentTreeDevtool);
   ReactDebugTool.addDevtool(ReactHostOperationHistoryDevtool);
+  ReactDebugTool.addDevtool(ReactChildrenMutationWarningDevtool);
   var url = (ExecutionEnvironment.canUseDOM && window.location.href) || '';
   if ((/[?&]react_perf\b/).test(url)) {
     ReactDebugTool.beginProfiling();

src/renderers/shared/devtools/ReactChildrenMutationWarningDevtool.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactChildrenMutationWarningDevtool
+ */
+
+'use strict';
+
+var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
+
+var warning = require('warning');
+
+function handleElement(debugID, element) {
+  if (element == null) {
+    return;
+  }
+  if (element._shadowChildren === undefined) {
+    return;
+  }
+  if (element._shadowChildren === element.props.children) {
+    return;
+  }
+  var isMutated = false;
+  if (Array.isArray(element._shadowChildren)) {
+    if (element._shadowChildren.length === element.props.children.length) {
+      for (var i = 0; i < element._shadowChildren.length; i++) {
+        if (element._shadowChildren[i] !== element.props.children[i]) {
+          isMutated = true;
+        }
+      }
+    } else {
+      isMutated = true;
+    }
+  }
+  warning(
+    Array.isArray(element._shadowChildren) && !isMutated,
+    'Component\'s children should not be mutated.%s',
+    ReactComponentTreeDevtool.getStackAddendumByID(debugID),
+  );
+}
+
+var ReactDOMUnknownPropertyDevtool = {
+  onBeforeMountComponent(debugID, element) {
+    handleElement(debugID, element);
+  },
+  onBeforeUpdateComponent(debugID, element) {
+    handleElement(debugID, element);
+  },
+};
+
+module.exports = ReactDOMUnknownPropertyDevtool;

src/renderers/shared/stack/reconciler/__tests__/ReactComponent-test.js

@@ -15,6 +15,10 @@ var React;
 var ReactDOM;
 var ReactTestUtils;
 
+function normalizeCodeLocInfo(str) {
+  return str.replace(/\(at .+?:\d+\)/g, '(at **)');
+}
+
 describe('ReactComponent', function() {
   beforeEach(function() {
     React = require('React');
@@ -45,6 +49,18 @@ describe('ReactComponent', function() {
     }).toThrow();
   });
 
+  it('should warn when children are mutated', function() {
+    spyOn(console, 'error');
+    var children = [<span key={0} />, <span key={1} />, <span key={2} />];
+    var element = <div>{children}</div>;
+    children[1] = <p key={1} />; // Mutation is illegal
+    ReactTestUtils.renderIntoDocument(element);
+    expect(console.error.calls.count()).toBe(1);
+    expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
+      'Warning: Component\'s children should not be mutated.\n    in div (at **)'
+    );
+  });
+
   it('should support refs on owned components', function() {
     var innerObj = {};
     var outerObj = {};