We create many `useDebugValue` helpers, loggers and so one now, so we can feel less pain.

What matter (**Updated**)
- previewing complex values brifely like chrome devtools does it for arrays, sets, maps, objects,,,

I [wrote related twit](https://twitter.com/mxtnr/status/1178271362890240001) recently with one of my DebugValue helpers. screenshot out here:
<img width="556" alt="Screenshot 2019-09-29 at 14 01 53" src="https://user-images.githubusercontent.com/6201068/66700775-5648bf80-ecfd-11e9-93fe-089d451bcffa.png">
_my named hooks currently require a `label` option unless react babel cannot transform name of variable automatically_
static contextType = BoolContext;
      render() {
        return null;
      }
    }
    const ModernContext = React.createContext();
    ModernContext.displayName = 'ModernContext';
    const container = document.createElement('div');
    await utils.actAsync(() =>
      ReactDOM.render(
        <React.Fragment>
          <LegacyContextProvider>
            <LegacyContextConsumer />
          </LegacyContextProvider>
          <BoolContext.Consumer>{value => null}</BoolContext.Consumer>
          <ModernContextType />
          <ModernContext.Provider value={contextData}>
            <ModernContext.Consumer>{value => null}</ModernContext.Consumer>
          </ModernContext.Provider>
        </React.Fragment>,
        container,
      ),
    );