1
# Component Rendering
2

3
Svelte provides functions for mounting, hydrating, and unmounting components in the DOM. These functions are essential for programmatically controlling component lifecycle.
4

5
## Capabilities
6

7
### mount
8

9
Mounts a component to the specified target and returns the component instance with its exports.
10

11
```typescript { .api }
12
/**
13
 * Mounts a component to the given target and returns the exports
14
 * @param component - Component to mount
15
 * @param options - Mount configuration options
16
 * @returns Component instance with exports
17
 */
18
function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(
19
  component: Component<Props, Exports, any>,
20
  options: MountOptions<Props>
21
): Exports;
22
```
23

24
**Usage Examples:**
25

26
```typescript
27
import { mount } from "svelte";
28
import App from "./App.svelte";
29

30
// Basic mounting
31
const app = mount(App, {
32
  target: document.getElementById("app")
33
});
34

35
// Mount with props
36
const app = mount(App, {
37
  target: document.body,
38
  props: {
39
    name: "World",
40
    count: 42
41
  }
42
});
43

44
// Mount with anchor and context
45
const app = mount(App, {
46
  target: document.body,
47
  anchor: document.getElementById("insertion-point"),
48
  props: { message: "Hello" },
49
  context: new Map([["theme", "dark"]]),
50
  intro: true
51
});
52

53
// Access component exports
54
console.log(app.someExportedValue);
55
app.someExportedFunction();
56
```
57

58
### hydrate
59

60
Hydrates a server-rendered component, attaching event listeners and making it interactive.
61

62
```typescript { .api }
63
/**
64
 * Hydrates a component on the given target and returns the exports
65
 * @param component - Component to hydrate
66
 * @param options - Hydration configuration options
67
 * @returns Component instance with exports
68
 */
69
function hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(
70
  component: Component<Props, Exports, any>,
71
  options: HydrateOptions<Props>
72
): Exports;
73
```
74

75
**Usage Examples:**
76

77
```typescript
78
import { hydrate } from "svelte";
79
import App from "./App.svelte";
80

81
// Hydrate server-rendered content
82
const app = hydrate(App, {
83
  target: document.getElementById("app"),
84
  props: {
85
    initialData: window.__INITIAL_DATA__
86
  }
87
});
88

89
// Hydrate with recovery mode
90
const app = hydrate(App, {
91
  target: document.getElementById("app"),
92
  props: { data: serverData },
93
  recover: true // Attempt to recover from hydration mismatches
94
});
95
```
96

97
### unmount
98

99
Unmounts a component that was previously mounted using `mount` or `hydrate`. Optionally plays outro transitions.
100

101
```typescript { .api }
102
/**
103
 * Unmounts a component that was previously mounted
104
 * @param component - Component instance to unmount
105
 * @param options - Unmount options including outro transitions
106
 * @returns Promise that resolves after transitions complete
107
 */
108
function unmount(component: Record<string, any>, options?: {
109
  outro?: boolean;
110
}): Promise<void>;
111
```
112

113
**Usage Examples:**
114

115
```typescript
116
import { mount, unmount } from "svelte";
117
import App from "./App.svelte";
118

119
// Mount component
120
const app = mount(App, {
121
  target: document.body
122
});
123

124
// Unmount immediately
125
await unmount(app);
126

127
// Unmount with outro transitions
128
await unmount(app, { outro: true });
129

130
// Programmatic component lifecycle
131
let currentApp = null;
132

133
function showApp() {
134
  if (currentApp) return;
135
  
136
  currentApp = mount(App, {
137
    target: document.getElementById("app")
138
  });
139
}
140

141
async function hideApp() {
142
  if (!currentApp) return;
143
  
144
  await unmount(currentApp, { outro: true });
145
  currentApp = null;
146
}
147
```
148

149
## Types
150

151
```typescript { .api }
152
interface MountOptions<Props extends Record<string, any> = Record<string, any>> {
153
  /** Target element where the component will be mounted */
154
  target: Document | Element | ShadowRoot;
155
  /** Optional node inside target to render before */
156
  anchor?: Node;
157
  /** Component properties */
158
  props?: Props;
159
  /** Context map accessible via getContext() */
160
  context?: Map<any, any>;
161
  /** Whether to play transitions on initial render */
162
  intro?: boolean;
163
  /** Deprecated: Use callback props instead */
164
  events?: Record<string, (e: any) => any>;
165
}
166

167
interface HydrateOptions<Props extends Record<string, any> = Record<string, any>> {
168
  /** Target element containing server-rendered content */
169
  target: Document | Element | ShadowRoot;
170
  /** Component properties */
171
  props?: Props;
172
  /** Context map accessible via getContext() */
173
  context?: Map<any, any>;
174
  /** Whether to play transitions during hydration */
175
  intro?: boolean;
176
  /** Attempt to recover from hydration mismatches */
177
  recover?: boolean;
178
  /** Deprecated: Use callback props instead */
179
  events?: Record<string, (e: any) => any>;
180
}
181

182
interface Component<
183
  Props extends Record<string, any> = {},
184
  Exports extends Record<string, any> = {},
185
  Bindings extends keyof Props | '' = string
186
> {
187
  (internals: ComponentInternals, props: Props): Exports;
188
}
189
```
190

191
## Best Practices
192

193
1. **Always handle cleanup**: Use `unmount` to properly clean up components and prevent memory leaks
194
2. **Use outro transitions**: Set `outro: true` when unmounting to play exit animations
195
3. **Handle hydration carefully**: Use `recover: true` in development to handle server/client mismatches
196
4. **Context inheritance**: Components inherit context from their mounting location
197
5. **Props reactivity**: Mounted components don't automatically react to prop changes - use stores for dynamic updates