rendering-hoist-jsx

SKILL.md

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.

Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists. Source: theorcdev/8bitcn-ui.

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-hoist-jsx Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor

View raw