hoist-static-jsx-elements

To optimize React rendering for static JSX elements, you can hoist unchanging elements outside the component function. This prevents React from unnecessarily re-creating the same static elements during each render cycle.

React re-creates large SVGs on every render because they are typically defined inside the component function. You can prevent this performance overhead by hoisting the static SVG JSX elements outside of the component.

The best way to stop unnecessary re-creation of static UI elements in React is manual hoisting. By moving static JSX outside the component function, you eliminate the overhead of regenerating unchanged elements during re-renders.

Manual JSX hoisting does not outperform the React Compiler for optimization. This manual performance technique of moving static elements outside components is actually superseded by the automated React Compiler.

You should hoist static JSX elements outside a React component when dealing with unchanging UI elements that cause performance degradation. It is particularly beneficial for optimizing components that frequently display complex SVG graphics.