disallow-reactive-vars-on-mount

[baseballyama]

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