mcpField
R
rendering-hoist-jsx

rendering-hoist-jsx

github.com/theorcdevDevelopment2.1k38 installsUpdated 2d ago
Repository

About rendering-hoist-jsx

A React coding skill that recommends moving static JSX elements outside components to avoid recreating them on each render. It notes that manual hoisting is unnecessary when React Compiler already performs this optimization.

Key features

  1. 01Hoist static JSX outside components
  2. 02Reuse elements across renders
  3. 03Optimize large static SVG nodes
  4. 04Account for React Compiler optimization

Use cases

  1. 01Avoid recreating a loading skeleton
  2. 02Reuse a static SVG across renders

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-hoist-jsx

After installing, type/rendering-hoist-jsxin Claude Code to confirm it loaded.

Details

From the project README

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.

Comments

Markdown supported