diff --git a/documentation/docs/03-runes/02-side-effects.md b/documentation/docs/03-runes/02-side-effects.md
index f7af6a6167..9cc0f15beb 100644
--- a/documentation/docs/03-runes/02-side-effects.md
+++ b/documentation/docs/03-runes/02-side-effects.md
@@ -245,16 +245,16 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
 <script>
 	import { tick } from 'svelte';
 
-	let div;
-	let messages = [];
+	let div = $state();
+	let messages = $state([]);
 
 	// ...
 
 	$effect.pre(() => {
 		if (!div) return; // not yet mounted
 
-		// reference `messages` so that this code re-runs whenever it changes
-		messages;
+		// reference `messages` array length so that this code re-runs whenever it changes
+		messages.length;
 
 		// autoscroll when new messages are added
 		if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 06b4f97834..879e39e5f0 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -453,16 +453,16 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
 <script>
 	import { tick } from 'svelte';
 
-	let div;
-	let messages = [];
+	let div = $state();
+	let messages = $state([]);
 
 	// ...
 
 	$effect.pre(() => {
 		if (!div) return; // not yet mounted
 
-		// reference `messages` so that this code re-runs whenever it changes
-		messages;
+		// reference `messages` array length so that this code re-runs whenever it changes
+		messages.length;
 
 		// autoscroll when new messages are added
 		if (