You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md
+164Lines changed: 164 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -6,3 +6,167 @@ title: Lifecycle hooks
6
6
- mention that `$effect` might be better for your use case
7
7
- beforeUpdate/afterUpdate with deprecation notice?
8
8
- or skip this entirely and only have it in the reference docs?
9
+
10
+
In Svelte 5, the component lifecycle consists of only two parts: Its creation and its destruction. Everything in-between - when certain state is updated - is not related to the component as a whole, only the parts that need to react to the state change are notified. This is because under the hood the smallest unit of change is actually not a component, it's the (render) effects that the component sets up upon component initialization. Consequently, there's no such thing as a "before update"/"after update" hook.
11
+
12
+
## `onMount`
13
+
14
+
The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live _inside_ the component; it can be called from an external module).
15
+
16
+
`onMount` does not run inside a component that is rendered on the server.
17
+
18
+
```svelte
19
+
<script>
20
+
import { onMount } from 'svelte';
21
+
22
+
onMount(() => {
23
+
console.log('the component has mounted');
24
+
});
25
+
</script>
26
+
```
27
+
28
+
If a function is returned from `onMount`, it will be called when the component is unmounted.
29
+
30
+
```svelte
31
+
<script>
32
+
import { onMount } from 'svelte';
33
+
34
+
onMount(() => {
35
+
const interval = setInterval(() => {
36
+
console.log('beep');
37
+
}, 1000);
38
+
39
+
return () => clearInterval(interval);
40
+
});
41
+
</script>
42
+
```
43
+
44
+
> This behaviour will only work when the function passed to `onMount`_synchronously_ returns a value. `async` functions always return a `Promise`, and as such cannot _synchronously_ return a function.
45
+
46
+
## `onDestroy`
47
+
48
+
> EXPORT_SNIPPET: svelte#onDestroy
49
+
50
+
Schedules a callback to run immediately before the component is unmounted.
51
+
52
+
Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the only one that runs inside a server-side component.
53
+
54
+
```svelte
55
+
<script>
56
+
import { onDestroy } from 'svelte';
57
+
58
+
onDestroy(() => {
59
+
console.log('the component is being destroyed');
60
+
});
61
+
</script>
62
+
```
63
+
64
+
## `tick`
65
+
66
+
While there's no "after update" hook, you can use `tick` to ensure that the UI is updated before continuing. `tick` returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.
67
+
68
+
```svelte
69
+
<script>
70
+
import { beforeUpdate, tick } from 'svelte';
71
+
72
+
beforeUpdate(async () => {
73
+
console.log('the component is about to update');
74
+
await tick();
75
+
console.log('the component just updated');
76
+
});
77
+
</script>
78
+
```
79
+
80
+
## Deprecated: `beforeUpdate` / `afterUpdate`
81
+
82
+
Svelte 4 contained hooks that ran before and after the component as a whole was updated. For backwards compatibility, these hooks were shimmed in Svelte 5 but not available inside components that use runes.
83
+
84
+
```svelte
85
+
<script>
86
+
import { beforeUpdate, afterUpdate } from 'svelte';
87
+
88
+
beforeUpdate(() => {
89
+
console.log('the component is about to update');
90
+
});
91
+
92
+
afterUpdate(() => {
93
+
console.log('the component just updated');
94
+
});
95
+
</script>
96
+
```
97
+
98
+
Instead of `beforeUpdate` use `$effect.pre` and instead of `afterUpdate` use `$effect` instead - these runes offer more granular control and only react to the changes you're actually interested in.
99
+
100
+
### Chat window example
101
+
102
+
To implement a chat window that autoscrolls to the bottom when new messages appear (but only if you were _already_ scrolled to the bottom), we need to measure the DOM before we update it.
103
+
104
+
In Svelte 4, we do this with `beforeUpdate`, but this is a flawed approach — it fires before _every_ update, whether it's relevant or not. In the example below, we need to introduce checks like `updatingMessages` to make sure we don't mess with the scroll position when someone toggles dark mode.
105
+
106
+
With runes, we can use `$effect.pre`, which behaves the same as `$effect` but runs before the DOM is updated. As long as we explicitly reference `messages` inside the effect body, it will run whenever `messages` changes, but _not_ when `theme` changes.
107
+
108
+
`beforeUpdate`, and its equally troublesome counterpart `afterUpdate`, are therefore deprecated in Svelte 5.
0 commit comments