(Deleted template as this is a suggestion, not a bug.)

The dev tools helpfully extracts HOC names and shows them in the components tree. [Example](https://react-devtools-tutorial.now.sh/higher-order-components):

![image](https://user-images.githubusercontent.com/921609/86582724-03ddbc00-bf7a-11ea-83fb-f9d0a3902e5f.png)

However, it doesn't give the same treatment to components in the profiler:

![image](https://user-images.githubusercontent.com/921609/86582766-135d0500-bf7a-11ea-8e2a-520597150db6.png)

In large trees, it is very confusing to see two components with the same name, so it would be useful to show the HOC name here as well.

As a workaround for now, users can click through to the "components" tab from the profiler, when a component is selected in the profiler flamegraph, to see this extra information.
const [count, updateCount] = useState(0);
  
  const [_, __] = useState(object);
  
  const debouncedCount = useDebounce(count, 1000);
  useCustomObject();
  const onClick = useCallback(
    function onClick() {
      updateCount(count + 1);
    },
    [count],
  );
  
  useNestedOuterHook();
  
  useDeepHookA();
  return <button onClick={onClick}>Count: {debouncedCount}</button>;
}
const MemoWithHooks = memo(FunctionWithHooks);
const ForwardRefWithHooks = forwardRef(FunctionWithHooks);
export default function CustomHooks() {
  return (
    <Fragment>
      <FunctionWithHooks />
      <MemoWithHooks />
      <ForwardRefWithHooks />
    </Fragment>
  );
}
function useDebounce(value, delay) {