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_
let targetRenderCount = 0;
    const errorSpy = ((console: any).error = jest.fn());
    const infoSpy = ((console: any).info = jest.fn());
    const logSpy = ((console: any).log = jest.fn());
    const warnSpy = ((console: any).warn = jest.fn());
    const Target = React.memo(props => {
      targetRenderCount++;
      console.error('error');
      console.info('info');
      console.log('log');
      console.warn('warn');
      React.useState(0);
      return null;
    });
    const container = document.createElement('div');
    await utils.actAsync(() =>
      ReactDOM.render(<Target a={1} b="abc" />, container),
    );
    expect(targetRenderCount).toBe(1);
    expect(errorSpy).toHaveBeenCalledTimes(1);
    expect(errorSpy).toHaveBeenCalledWith('error');
    expect(infoSpy).toHaveBeenCalledTimes(1);
    expect(infoSpy).toHaveBeenCalledWith('info');
    expect(logSpy).toHaveBeenCalledTimes(1);
    expect(logSpy).toHaveBeenCalledWith('log');
    expect(warnSpy).toHaveBeenCalledTimes(1);
    expect(warnSpy).toHaveBeenCalledWith('warn');
    const id = ((store.getElementIDAtIndex(0): any): number);
    let inspectedElement = null;
    function Suspender({target}) {