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_
isReadOnly,
  hidden,
  name,
  overrideValueFn,
  path,
  value,
}: KeyValueProps) {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const prevIsOpenRef = useRef(isOpen);
  const isInspectable =
    value !== null &&
    typeof value === 'object' &&
    value[meta.inspectable] &&
    value[meta.size] !== 0;
  useEffect(
    () => {
      if (
        isInspectable &&
        isOpen &&
        !prevIsOpenRef.current &&
        typeof inspectPath === 'function'
      ) {
        inspectPath(path);
      }
      prevIsOpenRef.current = isOpen;
    },
    [inspectPath, isInspectable, isOpen, path],
  );
  const toggleIsOpen = () => setIsOpen(prevIsOpen => !prevIsOpen);
  const dataType = typeof value;