rendering-hoist-jsx

Hoist static JSX elements to top-level constants outside your component. This prevents re-creation of identical nodes like large SVGs or icons on each render, reducing unnecessary work and improving performance in components with repeated static blocks.

Extract static JSX—such as icons or SVGs rendered in lists—as top-level constants and reference them in your render logic. This maintains referential stability and eliminates redundant element creation across render cycles.

Hoist JSX when you have static nodes that repeat across renders, particularly large SVGs, icons in arrays, or elements inside conditional blocks. Hoisting ensures the same reference is reused, avoiding the cost of re-creating identical elements.

Yes. Hoisting works well with arrays and conditional lists. Declare static JSX as a constant and reference it wherever needed—inside loops, conditionals, or repeated render paths—to maintain a stable reference across renders.

Hoisting static JSX reduces element creation overhead in frequent render paths, lowering CPU work and improving perceived performance. The benefit is most noticeable in UIs with many repeated static nodes like large icon libraries or SVG collections.