<!--
  Note: if the issue is about documentation or the website, please file it at:
  https://github.com/reactjs/reactjs.org/issues/new
-->

**Do you want to request a *feature* or report a *bug*?**

Bug

**What is the current behavior?**

Referring to [this twitter conversation](https://twitter.com/milankinen/status/1161718618633248768?s=20), it seems that `use-subscription` can cause "UI tearing" in some random cases due to a (possible) race condition w.r.t. the combination of `subscribe` and `getCurrentValue` in internal usage.

Here is a minimalistic application demonstrating the behaviour: https://github.com/milankinen/use-subscription-tearing-demo

**What is the expected behavior?**

I'd expect counters in the example application to *always* render same number.

**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**

Tested React version: 16.9.0 (haven't tested with older ones)
OS: OSX 10.14.6
Hardware: MacBook Pro (Retina, 15-inch, Mid 2015) 2.8 GHz Intel Core i7 & 16GB RAM
Browser: Chrome Version 76.0.3809.100 (Official Build) (64-bit)



@bvaughn 
act(() => {
      renderer.update(<Parent observed={observableB} />);
      expect(Scheduler).toFlushAndYieldThrough(['Child: b-0']);
      expect(log).toEqual([]);
      
      observableA.next('a-1');
      observableA.next('a-2');
      
      renderer.update(<Parent observed={observableA} />);
      
      
      
      expect(Scheduler).toFlushAndYield([
        'Grandchild: b-0',
        'Child: a-2',
        'Grandchild: a-2',
      ]);
      expect(log).toEqual([
        'Parent.componentDidUpdate:b-0',
        'Parent.componentDidUpdate:a-2',
      ]);
    });
    
    log.splice(0);
    act(() => observableB.next('b-1'));
    expect(Scheduler).toFlushAndYield([]);
    expect(log).toEqual([]);
  });
  it('should guard against updates that happen after unmounting', () => {
    function Child({value = 'default'}) {