From 6f96fc9e00b56b50ca24379aaac78a9760113957 Mon Sep 17 00:00:00 2001
From: Good Dev Student <133277280+good-dev-student@users.noreply.github.com>
Date: Thu, 2 Jan 2025 07:37:43 -0800
Subject: [PATCH] Update 04-$effect.md

		// reference `messages` array length so that this code re-runs whenever it changes
    // No need this line this for old svelte syntax you have to refrence like array = array.push(x)
		//messages.length;
---
 documentation/docs/02-runes/04-$effect.md | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md
index b33879522007..0f93d30a8e5a 100644
--- a/documentation/docs/02-runes/04-$effect.md
+++ b/documentation/docs/02-runes/04-$effect.md
@@ -149,15 +149,15 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
 	import { tick } from 'svelte';
 
 	let div = $state();
-	let messages = $state([]);
-
-	// ...
+	let messages = $state(["ddd"]);
 
 	$effect.pre(() => {
 		if (!div) return; // not yet mounted
 
 		// reference `messages` array length so that this code re-runs whenever it changes
-		messages.length;
+    // No need this line this for old svelte syntax you have to refrence like array = array.push(x) 
+		//messages.length;
+
 
 		// autoscroll when new messages are added
 		if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {
@@ -173,6 +173,8 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
 		<p>{message}</p>
 	{/each}
 </div>
+
+<input bind:value={messages} />
 ```
 
 Apart from the timing, `$effect.pre` works exactly like `$effect`.