Inject default batching after pending transactions (#7033)

Author: aweary

src/renderers/dom/server/ReactServerRendering.js

@@ -25,6 +25,8 @@ var emptyObject = require('emptyObject');
 var instantiateReactComponent = require('instantiateReactComponent');
 var invariant = require('invariant');
 
+var pendingTransactions = 0;
+
 /**
  * @param {ReactElement} element
  * @return {string} the HTML markup
@@ -36,6 +38,8 @@ function renderToStringImpl(element, makeStaticMarkup) {
 
     transaction = ReactServerRenderingTransaction.getPooled(makeStaticMarkup);
 
+    pendingTransactions++;
+
     return transaction.perform(function() {
       var componentInstance = instantiateReactComponent(element, true);
       var markup = ReactReconciler.mountComponent(
@@ -56,10 +60,15 @@ function renderToStringImpl(element, makeStaticMarkup) {
       return markup;
     }, null);
   } finally {
+    pendingTransactions--;
     ReactServerRenderingTransaction.release(transaction);
     // Revert to the DOM batching strategy since these two renderers
     // currently share these stateful modules.
-    ReactUpdates.injection.injectBatchingStrategy(ReactDefaultBatchingStrategy);
+    if (!pendingTransactions) {
+      ReactUpdates.injection.injectBatchingStrategy(
+        ReactDefaultBatchingStrategy
+      );
+    }
   }
 }
 

src/renderers/dom/server/__tests__/ReactServerRendering-test.js

@@ -399,6 +399,37 @@ describe('ReactServerRendering', function() {
       );
       expect(markup.indexOf('hello, world') >= 0).toBe(true);
     });
+
+    it('renders components with different batching strategies', function() {
+      var StaticComponent = React.createClass({
+        render: function() {
+          const staticContent = ReactServerRendering.renderToStaticMarkup(
+            <div>
+              <img src="foo-bar.jpg" />
+            </div>
+          );
+          return <div dangerouslySetInnerHTML={{__html: staticContent}} />;
+        },
+      });
+
+      var Component = React.createClass({
+        componentWillMount: function() {
+          this.setState({text: 'hello, world'});
+        },
+        render: function() {
+          return <div>{this.state.text}</div>;
+        },
+      });
+      expect(
+        ReactServerRendering.renderToString.bind(
+          ReactServerRendering,
+          <div>
+            <StaticComponent />
+            <Component />
+          </div>
+        )
+      ).not.toThrow();
+    });
   });
 
   it('warns with a no-op when an async setState is triggered', function() {