Inject default batching after pending transactions (#7033)
Brandon Dail committed
Jul 8, 2016 at 12:52 UTC
b6e1eb27185dd90e74ad8a67f98f6c5b35043c1a
2 files changed
+41
-1
src/renderers/dom/server/ReactServerRendering.js
+10
-1
@@ -25,6 +25,8 @@ var emptyObject = require('emptyObject');
25
var instantiateReactComponent = require('instantiateReactComponent');
26
var invariant = require('invariant');
27
28
+var pendingTransactions = 0;
29
+
30
/**
31
* @param {ReactElement} element
32
* @return {string} the HTML markup
@@ -36,6 +38,8 @@ function renderToStringImpl(element, makeStaticMarkup) {
38
39
transaction = ReactServerRenderingTransaction.getPooled(makeStaticMarkup);
40
41
+ pendingTransactions++;
42
+
43
return transaction.perform(function() {
44
var componentInstance = instantiateReactComponent(element, true);
45
var markup = ReactReconciler.mountComponent(
@@ -56,10 +60,15 @@ function renderToStringImpl(element, makeStaticMarkup) {
60
return markup;
61
}, null);
62
} finally {
63
+ pendingTransactions--;
64
ReactServerRenderingTransaction.release(transaction);
65
// Revert to the DOM batching strategy since these two renderers
66
// currently share these stateful modules.
62
- ReactUpdates.injection.injectBatchingStrategy(ReactDefaultBatchingStrategy);
67
+ if (!pendingTransactions) {
68
+ ReactUpdates.injection.injectBatchingStrategy(
69
+ ReactDefaultBatchingStrategy
70
+ );
71
+ }
72
}
73
}
74
src/renderers/dom/server/__tests__/ReactServerRendering-test.js
+31
@@ -399,6 +399,37 @@ describe('ReactServerRendering', function() {
399
);
400
expect(markup.indexOf('hello, world') >= 0).toBe(true);
401
});
402
+
403
+ it('renders components with different batching strategies', function() {
404
+ var StaticComponent = React.createClass({
405
+ render: function() {
406
+ const staticContent = ReactServerRendering.renderToStaticMarkup(
407
+ <div>
408
+ <img src="foo-bar.jpg" />
409
+ </div>
410
+ );
411
+ return <div dangerouslySetInnerHTML={{__html: staticContent}} />;
412
+ },
413
+ });
414
+
415
+ var Component = React.createClass({
416
+ componentWillMount: function() {
417
+ this.setState({text: 'hello, world'});
418
+ },
419
+ render: function() {
420
+ return <div>{this.state.text}</div>;
421
+ },
422
+ });
423
+ expect(
424
+ ReactServerRendering.renderToString.bind(
425
+ ReactServerRendering,
426
+ <div>
427
+ <StaticComponent />
428
+ <Component />
429
+ </div>
430
+ )
431
+ ).not.toThrow();
432
+ });
433
});
434
435
it('warns with a no-op when an async setState is triggered', function() {