How to access lifecycle methods in universal reactivity?

[daviareias]

I'm having a hard time finding out how to clear a interval/timeout using "Universal reactivity" files.

It's also really hard to search information regarding "svelte.js/svelte.ts" files because the only name referring to them is "universal reactivity" which is not great for search engines and sounds generic.

I tried doing something like this but doesn't seem to work:
https://v4.svelte.dev/tutorial/ondestroy

using $effect.root can maybe work, but there's no clear way to figure you when to call clean up, since we don't know inside svelte.js files when the component using the reactivity logic is being destroyed or mounted.

[brunnerh]

If the code is supposed to exist in the same lifecycle as a component, you can just use the various hooks and the $effect cleanup function (returned from the callback). You have to make sure the code is run during component initialization.

<script>
	import { counter } from './counter.svelte.js';

	const getCount = counter();
</script>

Count: {getCount()}

// counter.svelte.js
export function counter() {
	let count = $state(0);

	$effect(() => {
		console.log('initializing interval');
		const handle = setInterval(() => count++, 1000);

		return () => {
			console.log('cleaning up interval');
			clearInterval(handle);
		}
	});

	return () => count;
}

Playground

You could use onMount and onDestroy the same way.

If you want something that is not bound to the lifecycle of a component you would use $effect.root. In that case you have to figure out when it makes sense to clean up the root effect (if at all).

[daviareias]

Hmm this is probably the correct approach I just thought I couldn't use $effect because I'm using the interval to fetch and revalidate data every 10 seconds.

I would also need an extra method in my class to read the data inside a component that is different from the one that reads the data inside a svelte.js file