1
# Component Lifecycle
2

3
Svelte provides lifecycle functions that allow you to run code at specific points in a component's life cycle. These functions must be called during component initialization.
4

5
## Capabilities
6

7
### onMount
8

9
Schedules a function to run as soon as the component has been mounted to the DOM. Unlike `$effect`, the provided function only runs once.
10

11
```typescript { .api }
12
/**
13
 * Schedules a function to run as soon as the component has been mounted to the DOM
14
 * @param fn - Function to run on mount, can return cleanup function
15
 */
16
function onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): void;
17
```
18

19
**Usage Examples:**
20

21
```typescript
22
import { onMount } from "svelte";
23

24
let data = [];
25

26
onMount(async () => {
27
  // Fetch data when component mounts
28
  const response = await fetch("/api/data");
29
  data = await response.json();
30
  
31
  // Return cleanup function (optional)
32
  return () => {
33
    console.log("Component unmounted");
34
  };
35
});
36

37
// Setup intervals or event listeners
38
onMount(() => {
39
  const interval = setInterval(() => {
40
    console.log("Timer tick");
41
  }, 1000);
42
  
43
  // Cleanup interval when component unmounts
44
  return () => clearInterval(interval);
45
});
46
```
47

48
### onDestroy
49

50
Schedules a callback to run immediately before the component is unmounted. This is the only lifecycle function that runs inside server-side components.
51

52
```typescript { .api }
53
/**
54
 * Schedules a callback to run immediately before the component is unmounted
55
 * @param fn - Function to run on component destruction
56
 */
57
function onDestroy(fn: () => any): void;
58
```
59

60
**Usage Examples:**
61

62
```typescript
63
import { onDestroy } from "svelte";
64

65
let subscription;
66

67
// Subscribe to external service
68
subscription = externalService.subscribe(handleData);
69

70
onDestroy(() => {
71
  // Clean up subscription
72
  if (subscription) {
73
    subscription.unsubscribe();
74
  }
75
});
76

77
// Alternative pattern - cleanup in onMount
78
import { onMount, onDestroy } from "svelte";
79

80
onMount(() => {
81
  const cleanup = setupSomething();
82
  onDestroy(cleanup);
83
});
84
```
85

86
### beforeUpdate (Deprecated)
87

88
Schedules a callback to run immediately before the component is updated after any state change. **Deprecated in Svelte 5** - use `$effect.pre` instead.
89

90
```typescript { .api }
91
/**
92
 * @deprecated Use $effect.pre instead
93
 * Schedules a callback to run immediately before the component is updated
94
 * @param fn - Function to run before updates
95
 */
96
function beforeUpdate(fn: () => void): void;
97
```
98

99
**Usage Examples:**
100

101
```typescript
102
import { beforeUpdate } from "svelte";
103

104
let div;
105
let autoscroll;
106

107
beforeUpdate(() => {
108
  if (div) {
109
    const scrollableDistance = div.scrollHeight - div.offsetHeight;
110
    autoscroll = div.scrollTop > (scrollableDistance - 20);
111
  }
112
});
113
```
114

115
### afterUpdate (Deprecated)
116

117
Schedules a callback to run immediately after the component has been updated. **Deprecated in Svelte 5** - use `$effect` instead.
118

119
```typescript { .api }
120
/**
121
 * @deprecated Use $effect instead
122
 * Schedules a callback to run immediately after the component has been updated
123
 * @param fn - Function to run after updates
124
 */
125
function afterUpdate(fn: () => void): void;
126
```
127

128
**Usage Examples:**
129

130
```typescript
131
import { afterUpdate } from "svelte";
132

133
let div;
134
let autoscroll = false;
135

136
afterUpdate(() => {
137
  if (autoscroll && div) {
138
    div.scrollTo(0, div.scrollHeight);
139
  }
140
});
141
```
142

143
## Types
144

145
```typescript { .api }
146
type NotFunction<T> = T extends Function ? never : T;
147
```
148

149
## Migration Notes
150

151
In Svelte 5, prefer using runes over the deprecated lifecycle functions:
152

153
- Use `$effect(() => { ... })` instead of `afterUpdate`
154
- Use `$effect.pre(() => { ... })` instead of `beforeUpdate`
155
- `onMount` and `onDestroy` remain the preferred way to handle component mounting and cleanup