React Fragment

Fragmentとは？

コンポーネント中の要素をまとめるラッパー機能。
並列に複数の子要素を返すコンポーネントの宣言に使う。

前提

Reactではトップレベルに複数の要素をもつコンポーネントを定義できない。

構文エラーになる例

  const NG = () => (
    <p>first line</p>
    <p>second line</p>
  )

div要素などで囲めばエラーは回避できる。

構文エラーを回避できる例

  const OK = () => (
    <div>
      <p>first line</p>
      <p>second line</p>      
    </div>
  )

が、DOM上に無駄な要素が出てきてしまう。
DOMツリーが無駄に深くなるので、こんなdiv要素は消したい。

<div>
    <p>first line</p>
    <p>second line</p>
</div>

Fragmentを使う

こうしよう。無駄なラッパー要素はDOMから無くなる。

React.Fragment使用例

  const Good = () => (
    <React.Fragment>
      <p>first line</p>
      <p>second line</p>      
    </React.Fragment>
  )

空のタグで書くこともできる。

短縮記法

  const Good = () => (
    <>
      <p>first line</p>
      <p>second line</p>      
    </>
  )

Fragmentに渡せる属性は"key"だけ。
key属性を渡したいときはFragmentタグを使う。（短縮記法ではNG）

  const lines = ["first line", "second line", "third line"];
  const MapExample = () => (
    <React.Fragment>
      {lines.map((line, key) => (
        <React.Fragment key={key}>
          <p>{line}</p>
        </React.Fragment>
      ))}
    </React.Fragment>
  )

Fragmentを使う場合とdiv要素を使う場合のパフォーマンスを比較した記事。

Fragmentの方が速い、というわけではないのか。。
でも、この程度の差なら個人的にはFragmentを使いたいかな。