Cursor rule

1---
2alwaysApply: false
3---
4 
5## Hoist Static JSX Elements
6 
7Extract static JSX outside components to avoid re-creation.
8 
9**Incorrect (recreates element every render):**
10 
11```tsx
12function LoadingSkeleton() {
13  return <div className="animate-pulse h-20 bg-gray-200" />
14}
15 
16function Container() {
17  return (
18    <div>
19      {loading && <LoadingSkeleton />}
20    </div>
21  )
22}
23```
24 
25**Correct (reuses same element):**
26 
27```tsx
28const loadingSkeleton = (
29  <div className="animate-pulse h-20 bg-gray-200" />
30)
31 
32function Container() {
33  return (
34    <div>
35      {loading && loadingSkeleton}
36    </div>
37  )
38}
39```
40 
41This is especially helpful for large and static SVG nodes, which can be expensive to recreate on every render.
42 
43**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.
44