Deprioritize setState within a deprioritized tree

Currently we flag the path to a setState as a higher priority
than "offscreen". When we reconcile down this tree we bail out
if it is a hidden node. However, in the case that node is already
completed we don't hit that bail out path. We end up doing the
work immediately which ends up committing that part of the tree
at a higher priority.

This ensures that we don't let a deprioritized subtree get
reconciled at a higher priority.

Author: sebmarkbage

src/renderers/shared/fiber/ReactFiberBeginWork.js

@@ -309,6 +309,26 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>, s
   function bailoutOnAlreadyFinishedWork(current, workInProgress : Fiber) : ?Fiber {
     const priorityLevel = workInProgress.pendingWorkPriority;
 
+    if (workInProgress.tag === HostComponent &&
+        workInProgress.memoizedProps.hidden &&
+        workInProgress.pendingWorkPriority !== OffscreenPriority) {
+      // This subtree still has work, but it should be deprioritized so we need
+      // to bail out and not do any work yet.
+      // TODO: It would be better if this tree got its correct priority set
+      // during scheduleUpdate instead because otherwise we'll start a higher
+      // priority reconciliation first before we can get down here. However,
+      // that is a bit tricky since workInProgress and current can have
+      // different "hidden" settings.
+      let child = workInProgress.progressedChild;
+      while (child) {
+        // To ensure that this subtree gets its priority reset, the children
+        // need to be reset.
+        child.pendingWorkPriority = OffscreenPriority;
+        child = child.sibling;
+      }
+      return null;
+    }
+
     // TODO: We should ideally be able to bail out early if the children have no
     // more work to do. However, since we don't have a separation of this
     // Fiber's priority and its children yet - we don't know without doing lots

src/renderers/shared/fiber/__tests__/ReactIncrementalSideEffects-test.js

@@ -601,6 +601,113 @@ describe('ReactIncrementalSideEffects', () => {
     expect(ops).toEqual(['Baz', 'Bar', 'Baz', 'Bar', 'Bar']);
   });
 
+  it('deprioritizes setStates that happens within a deprioritized tree', () => {
+    var ops = [];
+
+    var barInstances = [];
+
+    class Bar extends React.Component {
+      constructor() {
+        super();
+        this.state = { active: false };
+        barInstances.push(this);
+      }
+      activate() {
+        this.setState({ active: true });
+      }
+      render() {
+        ops.push('Bar');
+        return <span prop={this.state.active ? 'X' : this.props.idx} />;
+      }
+    }
+    function Foo(props) {
+      ops.push('Foo');
+      return (
+        <div>
+          <span prop={props.tick} />
+          <div hidden={true}>
+            <Bar idx={props.idx} />
+            <Bar idx={props.idx} />
+            <Bar idx={props.idx} />
+          </div>
+        </div>
+      );
+    }
+    ReactNoop.render(<Foo tick={0} idx={0} />);
+    ReactNoop.flush();
+    expect(ReactNoop.root.children).toEqual([
+      div(
+        span(0),
+        div(
+          span(0),
+          span(0),
+          span(0)
+        )
+      ),
+    ]);
+
+    expect(ops).toEqual(['Foo', 'Bar', 'Bar', 'Bar']);
+
+    ops = [];
+
+    ReactNoop.render(<Foo tick={1} idx={0} />);
+    ReactNoop.flushDeferredPri(70);
+    expect(ReactNoop.root.children).toEqual([
+      div(
+        // Updated.
+        span(1),
+        div(
+          // Still not updated.
+          span(0),
+          span(0),
+          span(0)
+        )
+      ),
+    ]);
+
+    expect(ops).toEqual(['Foo', 'Bar', 'Bar']);
+    ops = [];
+
+    barInstances[0].activate();
+
+    // This should not be enough time to render the content of all the hidden
+    // items. Including the set state since that is deprioritized.
+    // TODO: The cycles it takes to do this could be lowered with further
+    // optimizations.
+    ReactNoop.flushDeferredPri(60);
+    expect(ReactNoop.root.children).toEqual([
+      div(
+        // Updated.
+        span(1),
+        div(
+          // Still not updated.
+          span(0),
+          span(0),
+          span(0)
+        )
+      ),
+    ]);
+
+    expect(ops).toEqual(['Bar']);
+    ops = [];
+
+    // However, once we render fully, we will have enough time to finish it all
+    // at once.
+    ReactNoop.flush();
+    expect(ReactNoop.root.children).toEqual([
+      div(
+        span(1),
+        div(
+          // Now we had enough time to finish the spans.
+          span('X'),
+          span(0),
+          span(0),
+        )
+      ),
+    ]);
+
+    expect(ops).toEqual(['Bar', 'Bar']);
+  });
   // TODO: Test that side-effects are not cut off when a work in progress node
   // moves to "current" without flushing due to having lower priority. Does this
   // even happen? Maybe a child doesn't get processed because it is lower prio?