Merge pull request #8658 from acdlite/nullupdatetest

Should not re-render as the result of a null state update

Author: acdlite

scripts/fiber/tests-passing.txt

@@ -1579,6 +1579,7 @@ src/renderers/shared/shared/__tests__/ReactUpdates-test.js
 * unmounts and remounts a root in the same batch
 * handles reentrant mounting in synchronous mode
 * mounts and unmounts are sync even in a batch
+* does not re-render if state update is null
 
 src/renderers/shared/shared/__tests__/refs-destruction-test.js
 * should remove refs when destroying the parent

src/renderers/shared/shared/__tests__/ReactUpdates-test.js

@@ -13,9 +13,9 @@
 
 var React;
 var ReactDOM;
-var ReactDOMFeatureFlags;
 var ReactTestUtils;
 var ReactUpdates;
+var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
 
 describe('ReactUpdates', () => {
   beforeEach(() => {
@@ -1153,4 +1153,23 @@ describe('ReactUpdates', () => {
       done();
     });
   });
+
+  it('does not re-render if state update is null', () => {
+    let container = document.createElement('div');
+
+    let instance;
+    let ops = [];
+    class Foo extends React.Component {
+      render() {
+        instance = this;
+        ops.push('render');
+        return <div />;
+      }
+    }
+    ReactDOM.render(<Foo />, container);
+
+    ops = [];
+    instance.setState(() => null);
+    expect(ops).toEqual([]);
+  });
 });

src/renderers/shared/stack/reconciler/ReactCompositeComponent.js

@@ -867,8 +867,9 @@ var ReactCompositeComponent = {
 
     var nextState = this._processPendingState(nextProps, nextContext);
     var shouldUpdate = true;
-
     if (!this._pendingForceUpdate) {
+      var prevState = inst.state;
+      shouldUpdate = willReceive || nextState !== prevState;
       if (inst.shouldComponentUpdate) {
         if (__DEV__) {
           shouldUpdate = measureLifeCyclePerf(
@@ -944,15 +945,21 @@ var ReactCompositeComponent = {
       return queue[0];
     }
 
-    var nextState = Object.assign({}, replace ? queue[0] : inst.state);
+    var nextState = replace ? queue[0] : inst.state;
+    var dontMutate = true;
     for (var i = replace ? 1 : 0; i < queue.length; i++) {
       var partial = queue[i];
-      Object.assign(
-        nextState,
-        typeof partial === 'function' ?
-          partial.call(inst, nextState, props, context) :
-          partial
-      );
+      let partialState = typeof partial === 'function' ?
+        partial.call(inst, nextState, props, context) :
+        partial;
+      if (partialState) {
+        if (dontMutate) {
+          dontMutate = false;
+          nextState = Object.assign({}, nextState, partialState);
+        } else {
+          Object.assign(nextState, partialState);
+        }
+      }
     }
 
     return nextState;