Skip to main content

Appendix

Deprecations

Aside from the breaking changes listed on the previous page, Svelte 5 should be a drop-in replacement for Svelte 4. That said, there are some features that we will remove in a future major version of Svelte, and we encourage you to update your apps now to avoid breaking changes in future.

beforeUpdate and afterUpdate

beforeUpdate(fn) schedules the fn callback to run immediately before any changes happen inside the current component. afterUpdate(fn) schedules it to run after any changes have taken effect.

These functions run indiscriminately when anything changes. By using $effect.pre and $effect instead, we can ensure that work only happens when the things we care about have changed. The difference is visible in this example — with afterUpdate, the callback runs on every mousemove event, whereas with $effect, the function only runs when temperature changes:

<script>
	import { afterUpdate } from 'svelte';

	let coords = $state({ x: 0, y: 0 });
	let temperature = $state(50);
	let trend = $state('...');

	let prev = temperature;

	afterUpdate(() => {
		console.log('running afterUpdate');
	$effect(() => {
		console.log('running $effect');

		if (temperature !== prev) {
			trend = temperature > prev ? 'getting warmer' : 'getting cooler';
			prev = temperature;
		}
	});
</script>

<svelte:window on:mousemove={(e) => coords = { x: e.clientX, y: e.clientY } } />

<input type="range" bind:value={temperature} >
<p>{trend}</p>

Note that using $effect and $effect.pre will put you in runes mode — be sure to update your props and state accordingly.

createEventDispatcher

createEventDispatcher returns a function from which you can dispatch custom events. The usage is somewhat boilerplate-y, but it was encouraged in Svelte 4 due to consistency with how you listen to dom events (via on:click for example).

Svelte 5 introduces event attributes which deprecate event directives (onclick instead of on:click), and as such we also encourage you to use callback properties for events instead:

<script>
	import { createEventDispatcher } from 'svelte';
	const dispatch = createEventDispatcher();
	let { greet } = $props();

	function greet() {
		dispatch('greet');
	}
</script>

<button
	on:click={greet}
	onclick={greet}
>greet</button>

When authoring custom elements, use the new host rune to dispatch events (among other things):

<script>
	import { createEventDispatcher } from 'svelte';
	const dispatch = createEventDispatcher();

	function greet() {
		dispatch('greet');
		$host().dispatchEvent(new CustomEvent('greet'));
	}
</script>

<button
	on:click={greet}
	onclick={greet}
>greet</button>

Note that using $props and $host will put you in runes mode — be sure to update your props and state accordingly.

immutable

The immutable compiler option is deprecated. Use runes mode instead, where all state is immutable (which means that assigning to object.property won't cause updates for anything that is observing object itself, or a different property of it).

previous Breaking changes
next