Don't render consumers that bailed out with bitmask even if there's a…

… deeper matching child

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -994,6 +994,10 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
         changedBits,
         renderExpirationTime,
       );
+    } else if (oldProps === newProps) {
+      // Skip over a memoized parent with a bitmask bailout even
+      // if we began working on it because of a deeper matching child.
+      return bailoutOnAlreadyFinishedWork(current, workInProgress);
     }
     // There is no bailout on `children` equality because we expect people
     // to often pass a bound method as a child, but it may reference

packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js

@@ -580,6 +580,121 @@ describe('ReactNewContext', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Foo: 3'), span('Bar: 3')]);
   });
 
+  it('can skip parents with bitmask bailout while updating their children', () => {
+    const Context = React.createContext({foo: 0, bar: 0}, (a, b) => {
+      let result = 0;
+      if (a.foo !== b.foo) {
+        result |= 0b01;
+      }
+      if (a.bar !== b.bar) {
+        result |= 0b10;
+      }
+      return result;
+    });
+
+    function Provider(props) {
+      return (
+        <Context.Provider value={{foo: props.foo, bar: props.bar}}>
+          {props.children}
+        </Context.Provider>
+      );
+    }
+
+    function Foo(props) {
+      return (
+        <Context.Consumer unstable_observedBits={0b01}>
+          {value => {
+            ReactNoop.yield('Foo');
+            return (
+              <React.Fragment>
+                <span prop={'Foo: ' + value.foo} />
+                {props.children}
+              </React.Fragment>
+            );
+          }}
+        </Context.Consumer>
+      );
+    }
+
+    function Bar(props) {
+      return (
+        <Context.Consumer unstable_observedBits={0b10}>
+          {value => {
+            ReactNoop.yield('Bar');
+            return (
+              <React.Fragment>
+                <span prop={'Bar: ' + value.bar} />
+                {props.children}
+              </React.Fragment>
+            );
+          }}
+        </Context.Consumer>
+      );
+    }
+
+    class Indirection extends React.Component {
+      shouldComponentUpdate() {
+        return false;
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    function App(props) {
+      return (
+        <Provider foo={props.foo} bar={props.bar}>
+          <Indirection>
+            <Foo>
+              <Indirection>
+                <Bar>
+                  <Indirection>
+                    <Foo />
+                  </Indirection>
+                </Bar>
+              </Indirection>
+            </Foo>
+          </Indirection>
+        </Provider>
+      );
+    }
+
+    ReactNoop.render(<App foo={1} bar={1} />);
+    expect(ReactNoop.flush()).toEqual(['Foo', 'Bar', 'Foo']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Foo: 1'),
+      span('Bar: 1'),
+      span('Foo: 1'),
+    ]);
+
+    // Update only foo
+    ReactNoop.render(<App foo={2} bar={1} />);
+    expect(ReactNoop.flush()).toEqual(['Foo', 'Foo']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Foo: 2'),
+      span('Bar: 1'),
+      span('Foo: 2'),
+    ]);
+
+    // Update only bar
+    ReactNoop.render(<App foo={2} bar={2} />);
+    expect(ReactNoop.flush()).toEqual(['Bar']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Foo: 2'),
+      span('Bar: 2'),
+      span('Foo: 2'),
+    ]);
+
+    // Update both
+    ReactNoop.render(<App foo={3} bar={3} />);
+    expect(ReactNoop.flush()).toEqual(['Foo', 'Bar', 'Foo']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Foo: 3'),
+      span('Bar: 3'),
+      span('Foo: 3'),
+    ]);
+  });
+
   it('warns if calculateChangedBits returns larger than a 31-bit integer', () => {
     spyOnDev(console, 'error');