Cursor rule

1---
2alwaysApply: false
3---
4 
5## Don't Define Components Inside Components
6 
7**Impact: HIGH (prevents remount on every render)**
8 
9Defining a component inside another component creates a new component type on every render. React sees a different component each time and fully remounts it, destroying all state and DOM.
10 
11A common reason developers do this is to access parent variables without passing props. Always pass props instead.
12 
13**Incorrect (remounts on every render):**
14 
15```tsx
16function UserProfile({ user, theme }) {
17  // Defined inside to access `theme` - BAD
18  const Avatar = () => (
19    <img
20      src={user.avatarUrl}
21      className={theme === 'dark' ? 'avatar-dark' : 'avatar-light'}
22    />
23  )
24 
25  // Defined inside to access `user` - BAD
26  const Stats = () => (
27    <div>
28      <span>{user.followers} followers</span>
29      <span>{user.posts} posts</span>
30    </div>
31  )
32 
33  return (
34    <div>
35      <Avatar />
36      <Stats />
37    </div>
38  )
39}
40```
41 
42Every time `UserProfile` renders, `Avatar` and `Stats` are new component types. React unmounts the old instances and mounts new ones, losing any internal state, running effects again, and recreating DOM nodes.
43 
44**Correct (pass props instead):**
45 
46```tsx
47function Avatar({ src, theme }: { src: string; theme: string }) {
48  return (
49    <img
50      src={src}
51      className={theme === 'dark' ? 'avatar-dark' : 'avatar-light'}
52    />
53  )
54}
55 
56function Stats({ followers, posts }: { followers: number; posts: number }) {
57  return (
58    <div>
59      <span>{followers} followers</span>
60      <span>{posts} posts</span>
61    </div>
62  )
63}
64 
65function UserProfile({ user, theme }) {
66  return (
67    <div>
68      <Avatar src={user.avatarUrl} theme={theme} />
69      <Stats followers={user.followers} posts={user.posts} />
70    </div>
71  )
72}
73```
74 
75**Symptoms of this bug:**
76- Input fields lose focus on every keystroke
77- Animations restart unexpectedly
78- `useEffect` cleanup/setup runs on every parent render
79- Scroll position resets inside the component
80