rendering-hoist-jsx

What problem does it solve?

Extract static JSX outside components to avoid re-creation on every render. This optimization reduces unnecessary work during renders and can improve perceived performance in UIs with many repeated static nodes.

Core Features & Use Cases

• Hoist static JSX elements: Move static JSX to top-level constants to reuse across renders.
• Performance gains: Reduces creation of identical elements in frequent render paths.
• Use Case: Large static SVGs or icons rendered inside arrays or conditional lists benefit most from this technique.

Quick Start

Identify static JSX blocks in a component, declare a top-level constant for the block, and replace inline JSX usage with the constant reference in the render path.