Ehancement #2365 : Add markup root directly in ReactMount cache

src/browser/ui/ReactDOMIDOperations.js

@@ -62,7 +62,7 @@ var ReactDOMIDOperations = {
       );
 
       // If we're updating to null or undefined, we should remove the property
-      // from the DOM node instead of inadvertantly setting to a string. This
+      // from the DOM node instead   of inadvertantly setting to a string. This
       // brings us in line with the same behavior we have on initial render.
       if (value != null) {
         DOMPropertyOperations.setValueForProperty(node, name, value);
@@ -156,7 +156,10 @@ var ReactDOMIDOperations = {
     'dangerouslyReplaceNodeWithMarkupByID',
     function(id, markup) {
       var node = ReactMount.getNode(id);
-      DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);
+      var newNode = DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);
+      // `getNode` populates ReactMount's node cache with all siblings, but the
+      // replaced node creates a hole. `getID` fills the hole with the new node.
+      ReactMount.getID(newNode);
     }
   ),
 
@@ -174,7 +177,11 @@ var ReactDOMIDOperations = {
       for (var i = 0; i < updates.length; i++) {
         updates[i].parentNode = ReactMount.getNode(updates[i].parentID);
       }
-      DOMChildrenOperations.processUpdates(updates, markup);
+      var children = DOMChildrenOperations.processUpdates(updates, markup);
+
+      for (var i = 0, len = children.length; i < len; i++) {
+        ReactMount.getID(children[i]);
+      }
     }
   )
 };

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

@@ -108,4 +108,30 @@ describe('ReactMount', function() {
 
     expect(instance1 === instance2).toBe(true);
   });
+
+  it('should call findComponentRoot once for each component rendered', function () {
+    spyOn(ReactMount, "findComponentRoot");
+
+    var container = document.createElement('container');
+    document.documentElement.appendChild(container);
+
+    var FindDOMNode = React.createClass({
+        componentDidMount: function() { 
+          this.getDOMNode(); 
+        }, 
+        render: function () { 
+          return <span />;
+        }
+    });
+
+    React.renderComponent(<div><FindDOMNode /></div>, container);
+
+    expect(ReactMount.findComponentRoot.callCount).toBe(1);    
+
+    React.renderComponent(<div><div><FindDOMNode /></ div></div>, container);
+
+    expect(ReactMount.findComponentRoot.callCount).toBe(2);
+
+  });
+
 });

src/browser/ui/dom/DOMChildrenOperations.js

@@ -91,6 +91,7 @@ var DOMChildrenOperations = {
    *
    * @param {array<object>} updates List of update configurations.
    * @param {array<string>} markupList List of markup strings.
+   * @return {array<DOMElement>} List of nodes rendered
    * @internal
    */
   processUpdates: function(updates, markupList) {
@@ -164,6 +165,8 @@ var DOMChildrenOperations = {
           break;
       }
     }
+
+    return renderedMarkup;
   }
 
 };

src/browser/ui/dom/Danger.js

@@ -154,6 +154,7 @@ var Danger = {
    *
    * @param {DOMElement} oldChild Child node to replace.
    * @param {string} markup Markup to render in place of the child node.
+   * @return {DOMElement} New rendered node
    * @internal
    */
   dangerouslyReplaceNodeWithMarkup: function(oldChild, markup) {
@@ -175,6 +176,8 @@ var Danger = {
 
     var newChild = createNodesFromMarkup(markup, emptyFunction)[0];
     oldChild.parentNode.replaceChild(newChild, oldChild);
+
+    return newChild;
   }
 
 };