From 73d97f7af96ee940d0516c08a887b6e0f0974be2 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 15 Jul 2024 14:41:27 +0200
Subject: [PATCH] docs: fix `$effect.pre` code example (#12444)

closes #12439
---
 documentation/docs/03-runes/02-side-effects.md            | 8 ++++----
 .../src/routes/docs/content/01-api/02-runes.md            | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

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 (