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 afterUpdatepermalink

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.

createEventDispatcherpermalink

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.

<svelte:component> in runes modepermalink

In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted <X> to re-render when X changed, you would either have to use <svelte:component this={X}> or put the component inside a {#key X}...{/key} block.

In Svelte 5 this is no longer true — if X changes, <X> re-renders.

In some cases <object.property> syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5.

For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where @const can be used:

{#each items as item}
	<svelte:component this={item.condition ? Y : Z} />
	{@const Component = item.condition ? Y : Z}
	<Component />
{/each}

A derived value may be used in other contexts:

<script>
	...
	let condition = $state(false);
	const Component = $derived(condition ? Y : Z);
</script>
 <svelte:component this={condition ? Y : Z} />
 <Component />

immutablepermalink

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).

context="module"permalink

context="module" is deprecated, use the new module attribute instead:

 <script context="module">
 <script module>
	...
</script>