React のコンポーネント名を変更したい

Question

前提・実現したいこと

タイトルの通りなのですが、デバッグ時など(ReactDeveloperToolsで見た時とか)にわかりやすくするためにコンポーネント名を変更したいのです。
React標準で名前に"."が入っているもの

• React.Fragment
• Context.Consumer
• Context.Provider

とかがあったのでできるのかなと思ったのですが、いい感じにできる方法はないんでしょうか？
一応下記のコードで実現はできたのですが、コンポーネントごとにやるのも面倒ですし、あまりいい方法でもないと思います。
できないのであれば別にそれでもいいのですが、スマートな方法で実現できないものかと

とりあえずできたもの

※別にオブジェクトな必要はないですが、これを使うとしたらオブジェクトだと思うので。

const Hoge = {
    Huga:({text})=>(
        <div>{text}</div>;
    )
};
const huga = Object.getOwnPropertyDescriptor(Hoge.Huga, "name");
huga.value = "Hoge.Huga";
Object.defineProperty(Hoge.Huga, "name", huga);

関係はないと思いますが一応環境

動くのが確認できればいいのでhtmlで読み込んでます。
file://だとbabelが動いてくれないのでVSCodeのLiveServerでやってます。

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>

Answer 1

コンポーネント側でdisplayNameというプロパティをセットすることで、表示名を決めることができます（React公式）。

const Hoge = {
    Huga:({text})=>(
        <div>{text}</div>;
    )
};

Hoge.Hoga.displayName = 'Hoge.Huga';

Comments

[ka2obushi]

displayNameってこれの話だったのか、ありがとうございます。