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_
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */
import React, {useEffect, useRef, useState} from 'react';
import type {Element} from 'react';
import EditableValue from './EditableValue';
import ExpandCollapseToggle from './ExpandCollapseToggle';
import {alphaSortEntries, getMetaValueLabel} from '../utils';
import {meta} from '../../../hydration';
import styles from './KeyValue.css';
import type {InspectPath} from './SelectedElement';
type OverrideValueFn = (path: Array<string | number>, value: any) => void;
type KeyValueProps = {|
  alphaSort: boolean,
  depth: number,
  hidden?: boolean,
  inspectPath?: InspectPath,
  isReadOnly?: boolean,
  name: string,
  overrideValueFn?: ?OverrideValueFn,
  path: Array<any>,
  value: any,
|};
export default function KeyValue({