即時関数便利

最近Reactを書いています。
条件分岐を書くときに、なんとなくReactっぽいのでJSX内でこんな感じに書きがちです。

// JavaScript
{isHoge && (
  <Hoge>
    <Fuga />
  </Hoge>
);
 
{isHoge ? (
  <Hoge>
    <Fuga />
  </Hoge>
) : (
  <Fuga>
    <Hoge />
  </Fuga>
)}

ただこれだと２つのパターンしか扱えないです。条件によって３つのコンポーネントを出しわけないといけないときにいい感じに書けないかな？って思って書いたのが以下のコードです。

// JavaScript
const hoge = (() => {
  if (isHoge) {
    return (
      <Hoge>
        <Fuga />
      </Hoge>
    );
  } else if (isFuga) {
    return (
      <Fuga>
        <Hoge />
      </Fuga>
    );
  } else {
    return <Piyo />;
  }
})();

これでhogeに３パターンの値を入れられます。これが即時関数です！
今までほぼほぼ書いたことなくて、幅が広がった気がします。

varでhogeを事前に定義して代入するよりはよいコードになったんじゃないでしょうか？

より良いコードの書き方ありましたら教えてください！！！！！