rendering-hoist-jsx
Locates static JSX elements that should be moved outside component bodies to prevent unnecessary re-renders.
Install
mkdir -p .claude/skills/rendering-hoist-jsx && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3045" && unzip -o skill.zip -d .claude/skills/rendering-hoist-jsx && rm skill.zipInstalls to .claude/skills/rendering-hoist-jsx
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists.Key capabilities
- →Extract static JSX elements
- →Optimize SVG rendering
- →Reduce component re-creation overhead
How it works
It moves static JSX definitions outside the component function scope so they are not re-allocated during every render cycle.
Inputs & outputs
When to use rendering-hoist-jsx
- →Hoist static loading skeletons
- →Optimize SVG components
- →Reduce component re-render overhead
About this skill
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 enabled, the compiler automatically hoists static JSX elements and optimizes component re-renders, making manual hoisting unnecessary.
When not to use it
- →Components with dynamic content
- →Projects using React Compiler
Limitations
- →Only applicable to truly static elements
How it compares
It manually prevents object re-creation that would otherwise occur inside a component body.
Compared to similar skills
rendering-hoist-jsx side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| rendering-hoist-jsx (this skill) | 1 | 6mo | No flags | Beginner |
| frontend-refactor-planner | 0 | 6mo | No flags | Advanced |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| react-modernization | 21 | 2mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by TheOrcDev
View all by TheOrcDev →You might also like
frontend-refactor-planner
lichunboa
Creates safe refactor plans for messy UI code including component splitting strategies, state simplification, performance optimizations, and accessibility improvements. Provides phased approach, risk assessment, and "done" criteria. Use when refactoring "legacy code", "messy components", "performanc
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
react-modernization
wshobson
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
typescript
lobehub
TypeScript code style and optimization guidelines. Use when writing TypeScript code (.ts, .tsx, .mts files), reviewing code quality, or implementing type-safe patterns. Triggers on TypeScript development, type safety questions, or code style discussions.
react-best-practices
redpanda-data
Client-side React performance optimization patterns.