More detailed friendly example

site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte

@@ -1,17 +1,20 @@
 <script>
-	import Inner from './Inner.svelte';
+	import Timer from './Timer.svelte';
 
-	let counter = 0;
-	let show = true;
+	let open = false;
+	let seconds = 0;
 
-	const toggle = () => (show = !show);
-	const handleTick = () => (counter += 1);
+	const toggle = () => (open = !open);
+	const handleTick = () => (seconds += 1);
 </script>
 
 <div>
-	<button on:click={toggle}>{show ? 'Destroy' : 'Show'} Inner component</button>
-	<p>counter={counter}</p>
-	{#if show}
-		<Inner callback={handleTick} />
+	<button on:click={toggle}>{open ? 'Close' : 'Open'} Timer</button>
+	<p>
+		The Timer component has been open for
+		{seconds} {seconds === 1 ? 'second' : 'seconds'}
+	</p>
+	{#if open}
+	<Timer callback={handleTick} />
 	{/if}
 </div>

site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Inner.svelte

@@ -1,10 +0,0 @@
-<script>
-	export let callback;
-	export let interval = 1000;
-
-	import { onInterval } from './utils.js';
-
-	onInterval(callback, interval);
-</script>
-
-<p>This component will execute callback every {interval} milliseconds</p>

site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { onInterval } from './utils.js';
+
+	export let callback;
+	export let interval = 1000;
+
+	onInterval(callback, interval);
+</script>
+
+<p>
+	This component execute callback every 
+	{interval} millisecond{interval === 1 ? '' : 's'}
+</p>
+
+<style>
+	p { 
+		border: 1px solid blue;
+	}
+</style>

site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js

@@ -4,6 +4,6 @@ export function onInterval(callback, milliseconds) {
 	const interval = setInterval(callback, milliseconds);
 
 	onDestroy(() => {
-		// After the component is destroyed, setInterval will continue to work, fix it here
+		// Fix the memory leak here
 	});
 }

site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte

@@ -1,17 +1,20 @@
 <script>
-	import Inner from './Inner.svelte';
+	import Timer from './Timer.svelte';
 
-	let counter = 0;
-	let show = true;
+	let open = true;
+	let seconds = 0;
 
-	const toggle = () => (show = !show);
-	const handleTick = () => (counter += 1);
+	const toggle = () => (open = !open);
+	const handleTick = () => (seconds += 1);
 </script>
 
 <div>
-	<button on:click={toggle}>{show ? 'Destroy' : 'Show'} Inner component</button>
-	<p>counter={counter}</p>
-	{#if show}
-		<Inner callback={handleTick} />
+	<button on:click={toggle}>{open ? 'Close' : 'Open'} Timer</button>
+	<p>
+		The Timer component has been open for
+		{seconds} {seconds === 1 ? 'second' : 'seconds'}
+	</p>
+	{#if open}
+	<Timer callback={handleTick} />
 	{/if}
 </div>

site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Inner.svelte

@@ -1,10 +0,0 @@
-<script>
-	export let callback;
-	export let interval = 1000;
-
-	import { onInterval } from './utils.js';
-
-	onInterval(callback, interval);
-</script>
-
-<p>This component will execute callback every {interval} milliseconds</p>

site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { onInterval } from './utils.js';
+
+	export let callback;
+	export let interval = 1000;
+
+	onInterval(callback, interval);
+</script>
+
+<p>
+	This component execute callback every 
+	{interval} millisecond{interval === 1 ? '' : 's'}
+</p>
+
+<style>
+	p { 
+		border: 1px solid blue;
+	}
+</style>

site/content/tutorial/07-lifecycle/02-ondestroy/text.md

@@ -40,4 +40,6 @@ export function onInterval(callback, milliseconds) {
 	let counter = 0;
 	onInterval(() => counter += 1, 1000);
 </script>
-```
+```
+
+Open and close the timer a few times and make sure the counter keeps ticking and the CPU load increases. This is due to a memory leak as the previous timers are not deleted. Don't forget to refresh the page before solving the example.