TheOrcDev / rendering-hoist-jsx
Install for your project team
Run this command in your project directory to install the skill for your entire team:
mkdir -p .claude/skills/rendering-hoist-jsx && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/3045" && unzip -o skill.zip -d .claude/skills/rendering-hoist-jsx && rm skill.zipProject Skills
This skill will be saved in .claude/skills/rendering-hoist-jsx/ and checked into git. All team members will have access to it automatically.
Important: Please verify the skill by reviewing its instructions before using it.
Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists.
0 views
0 installs
Skill Content
---
name: rendering-hoist-jsx
description: Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists.
---
## 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](https://react.dev/learn/react-compiler) enabled, the compiler automatically hoists static JSX elements and optimizes component re-renders, making manual hoisting unnecessary.