disallow-reactive-vars-on-mount

#1205

Issue

Open
B
baseballyama
Apr 24, 2025, 12:48 AM

Motivation

onMount runs in the component lifecycle, while reactive variables operate within the reactivity lifecycle. Referencing reactive variables inside the component lifecycle can easily lead to bugs.

Description

You cannot access reactive variables inside the onMount function.

Examples

<script>
	import { onMount } from 'svelte';
	let count = $state(0);

	// ✗ BAD
	onMount(() => {
		console.log(count);
	});
</script>

<!-- ✓ GOOD -->
{#if count > 0}
	<p>Count is positive</p>
{/if}

Additional comments

No response

Info

Assignees None
Labels enhancement, new rule
Milestone None