rendering-hoist-jsx

静的な JSX 要素をホイストする

静的な JSX をコンポーネントの外に移動して、再作成を避けます。

誤り（レンダーごとに要素を再作成します）：

function LoadingSkeleton() {
  return <div className="animate-pulse h-20 bg-gray-200" />
}

function Container() {
  return (
    <div>
      {loading && <LoadingSkeleton />}
    </div>
  )
}

正しい例（同じ要素を再利用します）：

const loadingSkeleton = (
  <div className="animate-pulse h-20 bg-gray-200" />
)

function Container() {
  return (
    <div>
      {loading && loadingSkeleton}
    </div>
  )
}

これは、レンダーごとの再作成にコストがかかる、大きくて静的な SVG ノードで特に役立ちます。

注： プロジェクトで React Compiler が有効になっている場合、コンパイラーが静的な JSX 要素を自動的にホイストし、コンポーネントの再レンダーを最適化するため、手動でのホイストは不要です。