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.

レンダリングごとに再作成を避けるために、コンポーネントの外側に静的な JSX 要素を抽出します。静的要素を繰り返しレンダリングする場合、またはリスト内でレンダリングする場合に適用します。 ソース: theorcdev/8bitcn-ui。

ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-hoist-jsx インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります

原文を見る