Hoist Static JSX Elements

Name: Hoist Static JSX Elements
Author: Vercel Engineering

renderingjsxstaticoptimization

⭐ 28.0k🕒 2026-06-10Source ↗

Install this skill

npx skills add vercel-labs/agent-skills

Works across Claude Code, Cursor, Codex, Copilot & Antigravity

Hoisting static JSX elements involves moving constant UI fragments outside of the functional component scope. By defining static markup—such as complex SVG paths, layout placeholders, or static icons—as a standalone constant at the module level, you prevent these elements from being re-instantiated during every component render cycle. In standard React reconciliation, defining JSX inside a component body triggers new object creation each time the component updates. Lifting these definitions to the top level preserves referential identity, reducing the workload on the virtual DOM diffing process and lowering CPU overhead for frequent re-renders. This pattern is particularly effective for heavy static assets or shared structural wrappers that do not depend on component state or props, ultimately smoothing out frame drops and optimizing the performance profile of computationally expensive interfaces.

When to Use This Skill

•Extracting large, static SVG illustrations or iconography
•Defining persistent layout shells or structural placeholders
•Managing static loading skeletons that require no dynamic props
•Optimizing deep component trees with numerous static decorative elements
•Refactoring codebases to reduce memory pressure in high-frequency update loops

How to Invoke This Skill

Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:

“Hoist static JSX elements for performance
“Move static components outside the render function
“Fix object recreation for static JSX
“Refactor static nodes to improve re-render speed
“How do I prevent static JSX from re-rendering?

What this skill does

•Identifies static JSX trees suitable for module-level extraction
•Preserves referential integrity for non-dynamic UI components
•Reduces object allocation frequency during component lifecycle updates
•Optimizes memory footprint by sharing static instances across renders
•Minimizes unnecessary virtual DOM re-evaluation for unchanging nodes

When not to use it

✕When the JSX relies on props or local component state
✕When using modern build setups with React Compiler enabled
✕When the element is small enough that the complexity of hoisting outweighs the performance gain

Example workflow

Identify a large, unchanging JSX block inside a functional component
Verify the block does not rely on local props or state
Move the JSX declaration to the top-level module scope
Replace the local JSX call with a reference to the new constant
Run performance profiling to confirm reduction in re-renders

Pitfalls & limitations

!Accidentally referencing component-scoped variables in hoisted JSX
!Attempting to hoist elements that need to react to state changes
!Loss of readability if too many constants crowd the top of the file

FAQ

Why not just use useMemo?

While useMemo keeps a reference stable across renders, it still executes the function on every call. Hoisting the JSX outside the component ensures it is defined only once when the module loads.

Does React Compiler make this obsolete?

Yes, if your build pipeline includes the React Compiler, it automatically hoists static elements, making manual extraction redundant.

Can I hoist JSX that uses props?

No. Hoisted elements are defined outside the component and cannot access scope-specific data like props or state.

Is this approach always faster?

It is faster for large or complex elements, but for simple elements, the impact on performance is negligible and may negatively affect code maintainability.

How it compares

Manual hoisting ensures strict referential equality at the module level, whereas generic approaches might rely on unstable patterns like useMemo or standard render cycles that create redundant object garbage.

Source & trust

⭐ 28k stars🕒 Updated 2026-06-10

View original skill on GitHub →

📄 Full skill instructions — original source: vercel-labs/agent-skills

## Hoist Static JSX Elements

Extract static JSX outside components to avoid re-creation.

**Incorrect (recreates element every render):**

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

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

**Correct (reuses same element):**

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](https://react.dev/learn/react-compiler) enabled, the compiler automatically hoists static JSX elements and optimizes component re-renders, making manual hoisting unnecessary.

By Vercel Engineering

How to Use This Skill Unit

Option A: Project-Specific (Recommended)

Click "Download" above
In your project, create the directory: .agent/skills/rendering-hoist-jsx/
Save the file as SKILL.md
The agent will automatically discover the skill based on its description.

Option B: Global Installation (All Agents)

Save the file to these locations to make it available across all projects:

Claude Code: ~/.claude/skills/vercel-labs/agent-skills/rendering-hoist-jsx/SKILL.md
Cursor: ~/.cursor/skills/vercel-labs/agent-skills/rendering-hoist-jsx/SKILL.md
Antigravity: ~/.gemini/antigravity/skills/vercel-labs/agent-skills/rendering-hoist-jsx/SKILL.md