AgentSkillsCN

rendering_hoist_jsx

从 Vercel 导入 skill rendering_hoist_jsx

SKILL.md
--- frontmatter
description: Imported skill rendering_hoist_jsx from vercel
name: rendering_hoist_jsx
signature: 93b229560fae92005ed9a2a829064607b39b2e984e92d221d05b2d41df2b7c0e
source: /a0/tmp/skills_research/vercel/skills/react-best-practices/rules/rendering-hoist-jsx.md

title: Hoist Static JSX Elements impact: LOW impactDescription: avoids re-creation tags: rendering, jsx, static, optimization

Hoist Static JSX Elements

Extract static JSX outside components to avoid re-creation.

Incorrect (recreates element every render):

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

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

Correct (reuses same element):

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

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

This is especially helpful for large and static SVG nodes, which can be expensive to recreate on every render.

Note: If your project has React Compiler enabled, the compiler automatically hoists static JSX elements and optimizes component re-renders, making manual hoisting unnecessary.