Handle updates to natives and composites

src/renderers/dom/shared/ReactDOMComponent.js

@@ -763,7 +763,7 @@ ReactDOMComponent.Mixin = {
           ReactInstrumentation.debugTool.onSetIsComposite(inlinedTextDebugID, false);
           ReactInstrumentation.debugTool.onSetDisplayName(inlinedTextDebugID, '#text');
           ReactInstrumentation.debugTool.onSetChildren(inlinedTextDebugID, []);
-          ReactInstrumentation.debugTool.onSetText(inlinedTextDebugID, contentToUse);
+          ReactInstrumentation.debugTool.onSetText(inlinedTextDebugID, '' + contentToUse);
         }
         DOMLazyTree.queueText(lazyTree, contentToUse);
       } else if (childrenToUse != null) {
@@ -1012,11 +1012,22 @@ ReactDOMComponent.Mixin = {
       this.updateChildren(null, transaction, context);
     } else if (lastHasContentOrHtml && !nextHasContentOrHtml) {
       this.updateTextContent('');
+      if (__DEV__) {
+        ReactInstrumentation.debugTool.onSetChildren(this._debugID, []);
+      }
     }
 
     if (nextContent != null) {
       if (lastContent !== nextContent) {
         this.updateTextContent('' + nextContent);
+        if (__DEV__) {
+          var inlinedTextDebugID = this._debugID + '#text';
+          ReactInstrumentation.debugTool.onSetChildren(this._debugID, [inlinedTextDebugID]);
+          ReactInstrumentation.debugTool.onSetIsComposite(inlinedTextDebugID, false);
+          ReactInstrumentation.debugTool.onSetDisplayName(inlinedTextDebugID, '#text');
+          ReactInstrumentation.debugTool.onSetChildren(inlinedTextDebugID, []);
+          ReactInstrumentation.debugTool.onSetText(inlinedTextDebugID, '' + nextContent);
+        }
       }
     } else if (nextHtml != null) {
       if (lastHtml !== nextHtml) {

src/renderers/dom/shared/ReactDOMTextComponent.js

@@ -14,6 +14,7 @@
 var DOMChildrenOperations = require('DOMChildrenOperations');
 var DOMLazyTree = require('DOMLazyTree');
 var ReactDOMComponentTree = require('ReactDOMComponentTree');
+var ReactInstrumentation = require('ReactInstrumentation');
 var ReactPerf = require('ReactPerf');
 
 var escapeTextContentForBrowser = require('escapeTextContentForBrowser');
@@ -67,6 +68,8 @@ Object.assign(ReactDOMTextComponent.prototype, {
     context
   ) {
     if (__DEV__) {
+      ReactInstrumentation.debugTool.onSetText(this._debugID, this._stringText);
+
       var parentInfo;
       if (nativeParent != null) {
         parentInfo = nativeParent._ancestorInfo;
@@ -140,6 +143,10 @@ Object.assign(ReactDOMTextComponent.prototype, {
           commentNodes[1],
           nextStringText
         );
+
+        if (__DEV__) {
+          ReactInstrumentation.debugTool.onSetText(this._debugID, nextStringText);
+        }
       }
     }
   },

src/renderers/shared/reconciler/ReactCompositeComponent.js

@@ -378,12 +378,12 @@ var ReactCompositeComponentMixin = {
       renderedElement
     );
     if (__DEV__) {
-      if (this._renderedComponent._debugID) {
-        ReactInstrumentation.debugTool.onSetChildren(
-          this._debugID,
+      ReactInstrumentation.debugTool.onSetChildren(
+        this._debugID,
+        this._renderedNodeType === ReactNodeTypes.EMPTY ?
+          [] :
           [this._renderedComponent._debugID]
-        );
-      }
+      );
     }
 
     var markup = ReactReconciler.mountComponent(
@@ -861,6 +861,15 @@ var ReactCompositeComponentMixin = {
       this._renderedComponent = this._instantiateReactComponent(
         nextRenderedElement
       );
+      if (__DEV__) {
+        ReactInstrumentation.debugTool.onSetChildren(
+          this._debugID,
+          this._renderedNodeType === ReactNodeTypes.EMPTY ?
+            [] :
+            [this._renderedComponent._debugID]
+        );
+      }
+
       var nextMarkup = ReactReconciler.mountComponent(
         this._renderedComponent,
         transaction,

src/renderers/shared/reconciler/ReactMultiChild.js

@@ -216,13 +216,6 @@ var ReactMultiChild = {
       );
       this._renderedChildren = children;
 
-      if (__DEV__) {
-        ReactInstrumentation.debugTool.onSetChildren(
-          this._debugID,
-          Object.keys(children).map(key => children[key]._debugID)
-        );
-      }
-
       var mountImages = [];
       var index = 0;
       for (var name in children) {
@@ -239,6 +232,16 @@ var ReactMultiChild = {
           mountImages.push(mountImage);
         }
       }
+
+      if (__DEV__) {
+        ReactInstrumentation.debugTool.onSetChildren(
+          this._debugID,
+          children ?
+            Object.keys(children).map(key => children[key]._debugID) :
+            []
+        );
+      }
+
       return mountImages;
     },
 
@@ -366,6 +369,15 @@ var ReactMultiChild = {
         processQueue(this, updates);
       }
       this._renderedChildren = nextChildren;
+
+      if (__DEV__) {
+        ReactInstrumentation.debugTool.onSetChildren(
+          this._debugID,
+          nextChildren ?
+            Object.keys(nextChildren).map(key => nextChildren[key]._debugID) :
+            []
+        );
+      }
     },
 
     /**

src/renderers/shared/reconciler/instantiateReactComponent.js

@@ -42,18 +42,18 @@ function getDeclarationErrorAddendum(owner) {
 }
 
 function getDisplayName(instance) {
-   var element = instance._currentElement;
-   if (element == null) {
-     return '#empty';
-   } else if (typeof element === 'string' || typeof element === 'number') {
-     return '#text';
-   } else if (typeof element.type === 'string') {
-     return element.type;
-   } else if (instance.getName) {
-     return instance.getName() || 'Unknown';
-   } else {
-     return element.type.displayName || element.type.name || 'Unknown';
-   }
+  var element = instance._currentElement;
+  if (element == null) {
+    return '#empty';
+  } else if (typeof element === 'string' || typeof element === 'number') {
+    return '#text';
+  } else if (typeof element.type === 'string') {
+    return element.type;
+  } else if (instance.getName) {
+    return instance.getName() || 'Unknown';
+  } else {
+    return element.type.displayName || element.type.name || 'Unknown';
+  }
 }
 
 /**
@@ -85,7 +85,6 @@ function instantiateReactComponent(node) {
   var instance;
 
   var isEmpty = false;
-  var isText = false;
   var isComposite = false;
 
   if (node === null || node === false) {
@@ -115,7 +114,6 @@ function instantiateReactComponent(node) {
       instance = new ReactCompositeComponentWrapper(element);
     }
   } else if (typeof node === 'string' || typeof node === 'number') {
-    isText = true;
     instance = ReactNativeComponent.createInstanceForText(node);
   } else {
     invariant(
@@ -156,9 +154,6 @@ function instantiateReactComponent(node) {
     if (owner) {
       ReactInstrumentation.debugTool.onSetOwner(instance._debugID, owner._debugID);
     }
-    if (isText) {
-      ReactInstrumentation.debugTool.onSetText(instance._debugID, node);
-    }
   }
 
   // Internal instances should fully constructed at this point, so they should