[Fiber] Introduce API to opt-out of batching

[acdlite]

unbatchedUpdates reverses the effect of batchedUpdates by resetting the batching context.

This does not affect nested updates, which are always deferred regardless of whether they are inside a batch.

This change is a partial reversion of #8634, which added the ability to trigger nested updates using syncUpdates. I had thought that was the behavior we wanted for top-level mount and unmount, but it turns out all we really need is the ability to opt-out of batchedUpdates. So even though it's a deviation from how Stack works, Fiber does not allow nested updates at all. We may later decide to provide this as an escape hatch, if it helps people migrate to Fiber.

[bvaughn]

I like this change. Cleaner and easier to follow. Small problem with a test but otherwise things look good to me.

[bvaughn]

This expectation won't be evaluated. It could fail and Jest won't catch it because you've already called done in componentDidUpdate above. To resolve this you could set a bool (eg componentDidUpdateCalled = true) in componentDidUpdate above, verify it here, and then call done() at the end of the sync update.

it('nested updates are always deferred, even inside unbatchedUpdates', done => {
  let instance;
  let componentDidUpdateCalled = false;
  class Foo extends React.Component {
    state = { step: 0 };
    componentDidUpdate() {
      if (this.state.step === 1) {
        ReactNoop.unbatchedUpdates(() => {
          // This is a nested state update, so it should not be
          // flushed synchronously, even though we wrapped it
          // in unbatchedUpdates.
          this.setState({ step: 2 });
        });
        expect(ReactNoop.getChildren()).toEqual([span(1)]);
        componentDidUpdateCalled = true;
      }
    }
    render() {
      instance = this;
      return <span prop={this.state.step} />;
    }
  }
  ReactNoop.render(<Foo />);
  ReactNoop.flush();
  expect(ReactNoop.getChildren()).toEqual([span(0)]);

  ReactNoop.syncUpdates(() => {
    instance.setState({ step: 1 });
    expect(componentDidUpdateCalled).toBe(true);
    expect(ReactNoop.getChildren()).toEqual([span(2)]);
    done();
  });
});

[acdlite]

Oops, good catch!

[acdlite]

Fixed by pushing to an array like we usually do

[bvaughn]

👍

[sebmarkbage]

You've changed this behavior so you had to update but you didn't replace it with an equivalent test anywhere. This is just less test coverage instead of testing the new behavior.

[acdlite]

Isn't this the equivalent test? https://github.com/facebook/react/pull/8661/files/ad7bcdf999ffc2cd891aef00174f245bcfb497c1#diff-4f1eede220a643b4c75172fcaf8daf59R370