零弐壱蜂

[React] 無駄な React.Fragment (`<></>`) は書かない方が良い

3 min read
React

無駄な<></>は記述しないようにしようという話。

事前知識

無駄な React.Fragment はそのまま出力される

ビルド前

両方とも HTML のレンダリング結果は同じである。

Sample1Sample2 
const Sample1 = () => {
  return (
    <>
      <>
        <div>About</div>
      </>
      <>
        <div>About</div>
      </>
    </>
  );
};

無駄な Fragment が記述されたコンポーネント（Sample1）

 
const Sample2 = () => {
  return (
    <>
      <div>About</div>
      <div>About</div>
    </>
  );
};

Sample1 から無駄な Fragment を取り除いたコンポーネント（Sample2）

ビルド後

HTML のレンダリング結果は同じでも、ビルド後の JavaScript のソースは異なる。ビルドしてもReact.Fragmentは定義した通り出力される。

Sample1Sample2 
const Sample1 = () => {
  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      React.Fragment,
      null,
      /*#__PURE__*/ React.createElement("div", null, "About")
    ),
    /*#__PURE__*/ React.createElement(
      React.Fragment,
      null,
      /*#__PURE__*/ React.createElement("div", null, "About")
    )
  );
};

const Sample2 = () => {
  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement("div", null, "About"),
    /*#__PURE__*/ React.createElement("div", null, "About")
  );
};

変換結果のプレイグラウンド、こちら（Babel - Try it out）に置いておく。

まとめ

記述したReact.Fragmentは最適化されず残ってしまう。大きな副作用があるわけではないので無駄に記述してしまいがちだが、その分ファイルサイズの肥大化やスクリプトの解析時間に影響を与えてしまうため、無駄に記述するのはやめよう。

こういうトップレベルに無駄なReact.Fragmentが残りがちなので気をつけよう。

const Component = () => {
  return (
    <>
      <div className="Component"></div>
    </>
  );
};

このページをシェアする

Edit on GitHub

関連タグ

JavaScriptCSSNext.jsCSS in JS

関連記事

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク（React、Vue.js）を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメ

[CSS in JS] 外部のリセットCSSを使う方法

目的 / 課題 / おまけ

[React 18] useEffect が2回実行されてしまう問題の対処法

確認した環境 / 解決方法 / 参考

[Next.js] "title element received an array with more than 1 element as children."の解決方法

状況 / 解決方法

[初学者向け] Next.js で開発を始める前に知っておきたいポイントと開発方法

想定読者 / 執筆同時のNext.js / Next.js とは / なぜ、Next.js を使うのか / セットアップ / ファイルベースルーティング / 事前レンダリング（プリレンダリング）とは / 参考

[Next.js] Emotion SWCを有効にする方法

概要 / 方法 / その他