1---
2title: Don't Define Components Inside Components
3impact: HIGH
4impactDescription: prevents remount on every render
5tags: rerender, components, remount, performance
6---
7 
8## Don't Define Components Inside Components
9 
10**Impact: HIGH (prevents remount on every render)**
11 
12Defining 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.
13 
14A common reason developers do this is to access parent variables without passing props. Always pass props instead.
15 
16**Incorrect (remounts on every render):**
17 
18```tsx
19function UserProfile({ user, theme }) {
20  // Defined inside to access `theme` - BAD
21  const Avatar = () => (
22    <img
23      src={user.avatarUrl}
24      className={theme === 'dark' ? 'avatar-dark' : 'avatar-light'}
25    />
26  )
27 
28  // Defined inside to access `user` - BAD
29  const Stats = () => (
30    <div>
31      <span>{user.followers} followers</span>
32      <span>{user.posts} posts</span>
33    </div>
34  )
35 
36  return (
37    <div>
38      <Avatar />
39      <Stats />
40    </div>
41  )
42}
43```
44 
45Every 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.
46 
47**Correct (pass props instead):**
48 
49```tsx
50function Avatar({ src, theme }: { src: string; theme: string }) {
51  return (
52    <img
53      src={src}
54      className={theme === 'dark' ? 'avatar-dark' : 'avatar-light'}
55    />
56  )
57}
58 
59function Stats({ followers, posts }: { followers: number; posts: number }) {
60  return (
61    <div>
62      <span>{followers} followers</span>
63      <span>{posts} posts</span>
64    </div>
65  )
66}
67 
68function UserProfile({ user, theme }) {
69  return (
70    <div>
71      <Avatar src={user.avatarUrl} theme={theme} />
72      <Stats followers={user.followers} posts={user.posts} />
73    </div>
74  )
75}
76```
77 
78**Symptoms of this bug:**
79- Input fields lose focus on every keystroke
80- Animations restart unexpectedly
81- `useEffect` cleanup/setup runs on every parent render
82- Scroll position resets inside the component
83