1---
2title: Hoist Static JSX Elements
3impact: LOW
4impactDescription: avoids re-creation
5tags: rendering, jsx, static, optimization
6---
7 
8## Hoist Static JSX Elements
9 
10Extract static JSX outside components to avoid re-creation.
11 
12**Incorrect (recreates element every render):**
13 
14```tsx
15function LoadingSkeleton() {
16  return <div className="animate-pulse h-20 bg-gray-200" />
17}
18 
19function Container() {
20  return (
21    <div>
22      {loading && <LoadingSkeleton />}
23    </div>
24  )
25}
26```
27 
28**Correct (reuses same element):**
29 
30```tsx
31const loadingSkeleton = (
32  <div className="animate-pulse h-20 bg-gray-200" />
33)
34 
35function Container() {
36  return (
37    <div>
38      {loading && loadingSkeleton}
39    </div>
40  )
41}
42```
43 
44This is especially helpful for large and static SVG nodes, which can be expensive to recreate on every render.
45 
46**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler automatically hoists static JSX elements and optimizes component re-renders, making manual hoisting unnecessary.
47