#5473 warn and ignore setState and forceUpdate calls if rendered on server

src/isomorphic/modern/class/ReactComponent.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var ReactNoopUpdateQueue = require('ReactNoopUpdateQueue');
+var ReactInstanceMap = require('ReactInstanceMap');
 
 var canDefineProperty = require('canDefineProperty');
 var emptyObject = require('emptyObject');
@@ -71,6 +72,18 @@ ReactComponent.prototype.setState = function(partialState, callback) {
       'setState(...): You passed an undefined or null state object; ' +
       'instead, use forceUpdate().'
     );
+    var instance = ReactInstanceMap.get(this);
+    if (instance && instance._serverSideRendered &&
+      instance._serverSideRendered.isAfterComponentWillMount) {
+      warning(
+        warnedAboutSetStateIfSSR,
+        'setState(...): method calls executed after componentWillMount ' +
+        '(e.g. setTimeout() callbacks)  are ignored if component was ' +
+        'rendered on server.'
+      );
+      warnedAboutSetStateIfSSR = true;
+      return;
+    }
   }
   this.updater.enqueueSetState(this, partialState);
   if (callback) {
@@ -93,6 +106,18 @@ ReactComponent.prototype.setState = function(partialState, callback) {
  * @protected
  */
 ReactComponent.prototype.forceUpdate = function(callback) {
+  if (__DEV__) {
+    var instance = ReactInstanceMap.get(this);
+    if (instance && instance._serverSideRendered) {
+      warning(
+        warnedAboutSetStateIfSSR,
+        'forceUpdate(...): all method calls are ignored if component was ' +
+        'rendered on server.'
+      );
+      warnedAboutSetStateIfSSR = true;
+      return;
+    }
+  }
   this.updater.enqueueForceUpdate(this);
   if (callback) {
     this.updater.enqueueCallback(this, callback);
@@ -103,8 +128,11 @@ ReactComponent.prototype.forceUpdate = function(callback) {
  * Deprecated APIs. These APIs used to exist on classic React classes but since
  * we would like to deprecate them, we're not going to move them over to this
  * modern base class. Instead, we define a getter that warns if it's accessed.
+ * warnedAboutSetStateIfSSR is not a part of deprecated APIs
  */
 if (__DEV__) {
+  var warnedAboutSetStateIfSSR = false;
+
   var deprecatedAPIs = {
     isMounted: [
       'isMounted',

src/renderers/dom/server/ReactServerRendering.js

@@ -41,6 +41,9 @@ function renderToStringImpl(element, makeStaticMarkup) {
 
     return transaction.perform(function() {
       var componentInstance = instantiateReactComponent(element);
+      if (__DEV__) {
+        componentInstance._serverSideRendered = {isAfterComponentWillMount: false};
+      }
       var markup = componentInstance.mountComponent(
         transaction,
         null,

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

@@ -254,6 +254,70 @@ describe('ReactServerRendering', function() {
         'renderToString(): You must pass a valid ReactElement.'
       );
     });
+
+    it('should warn once and ignore setState calls executed ' +
+        'after componentWillMount', function() {
+      spyOn(console, 'error');
+
+      var Component = React.createClass({
+        componentWillMount: function() {
+          setTimeout(() => {
+            this.setState({hello: 'from the'});
+            this.setState({other: 'side'});
+          });
+        },
+        render: function() {
+          return <div></div>;
+        },
+      });
+
+      ReactReconcileTransaction.prototype.perform = function() {
+        // We shouldn't ever be calling this on the server
+        throw new Error('Browser reconcile transaction should not be used');
+      };
+      ReactServerRendering.renderToString(
+        <Component />
+      );
+
+      jest.runAllTimers();
+      expect(setTimeout.mock.calls.length).toBe(1);
+      expect(console.error.calls.length).toBe(1);
+      expect(console.error.argsForCall[0][0]).toContain(
+        'setState(...): method calls executed after componentWillMount ' +
+        '(e.g. setTimeout() callbacks)  are ignored if component was ' +
+        'rendered on server.'
+      );
+    });
+
+    it('should warn once and ignore all forceUpdate calls', function() {
+      spyOn(console, 'error');
+
+      var Component = React.createClass({
+        componentWillMount: function() {
+          this.forceUpdate();
+          setTimeout(() => {
+            this.forceUpdate();
+          });
+        },
+        render: function() {
+          return <div></div>;
+        },
+      });
+
+      ReactReconcileTransaction.prototype.perform = function() {
+        // We shouldn't ever be calling this on the server
+        throw new Error('Browser reconcile transaction should not be used');
+      };
+      ReactServerRendering.renderToString(
+        <Component />
+      );
+
+      jest.runAllTimers();
+      expect(setTimeout.mock.calls.length).toBe(1);
+      expect(console.error.calls.length).toBe(1);
+      expect(console.error.argsForCall[0][0]).toContain('forceUpdate(...): ' +
+        'all method calls are ignored if component was rendered on server.');
+    });
   });
 
   describe('renderToStaticMarkup', function() {
@@ -365,6 +429,8 @@ describe('ReactServerRendering', function() {
     });
 
     it('allows setState in componentWillMount without using DOM', function() {
+      spyOn(console, 'error');
+
       var Component = React.createClass({
         componentWillMount: function() {
           this.setState({text: 'hello, world'});
@@ -381,6 +447,8 @@ describe('ReactServerRendering', function() {
       var markup = ReactServerRendering.renderToString(
         <Component />
       );
+
+      expect(console.error.calls.length).toBe(0);
       expect(markup.indexOf('hello, world') >= 0).toBe(true);
     });
   });

src/renderers/shared/reconciler/ReactCompositeComponent.js

@@ -349,6 +349,12 @@ var ReactCompositeComponentMixin = {
       }
     }
 
+    if (__DEV__) {
+      if (this._serverSideRendered) {
+        this._serverSideRendered.isAfterComponentWillMount = true;
+      }
+    }
+
     // If not a stateless component, we now render
     if (renderedElement === undefined) {
       renderedElement = this._renderValidatedComponent();

src/renderers/shared/reconciler/instantiateReactComponent.js

@@ -122,6 +122,7 @@ function instantiateReactComponent(node) {
   if (__DEV__) {
     instance._isOwnerNecessary = false;
     instance._warnedAboutRefsInRender = false;
+    instance._serverSideRendered = null;
   }
 
   // Internal instances should fully constructed at this point, so they should