From 828502a47585286f80cb859a0089f5b036987b0e Mon Sep 17 00:00:00 2001
From: stephane-vanraes <stephane.vanraes@gmail.com>
Date: Fri, 25 Oct 2024 09:01:48 +0200
Subject: [PATCH 1/2] clarify why we need to use the derived rune

---
 documentation/docs/02-runes/03-$derived.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/documentation/docs/02-runes/03-$derived.md b/documentation/docs/02-runes/03-$derived.md
index 4f0d70dcc8c8..036f8c7edd20 100644
--- a/documentation/docs/02-runes/03-$derived.md
+++ b/documentation/docs/02-runes/03-$derived.md
@@ -2,7 +2,19 @@
 title: $derived
 ---
 
-Derived state is declared with the `$derived` rune:
+
+Svelte's `<script>` blocks are run only when the component is created, so assignments within a `<script>` block are not automatically run again when a prop updates. 
+
+```svelte
+<script>
+	let count = $state(0);  
+	// this will only set `doubled` on component creation
+	// it will not update when `count` does
+	let doubled = count * 2;
+</script>
+```
+
+We can make any variable based on others reactive by declaring them a Derived state using the `$derived` rune:
 
 ```svelte
 <script>

From be931e365c31b18dde97910af64cc3cc8e130e1b Mon Sep 17 00:00:00 2001
From: stephane-vanraes <stephane.vanraes@gmail.com>
Date: Fri, 25 Oct 2024 11:48:55 +0200
Subject: [PATCH 2/2] put clarification as note

---
 documentation/docs/02-runes/03-$derived.md | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/documentation/docs/02-runes/03-$derived.md b/documentation/docs/02-runes/03-$derived.md
index 036f8c7edd20..96cafeaaea85 100644
--- a/documentation/docs/02-runes/03-$derived.md
+++ b/documentation/docs/02-runes/03-$derived.md
@@ -2,19 +2,7 @@
 title: $derived
 ---
 
-
-Svelte's `<script>` blocks are run only when the component is created, so assignments within a `<script>` block are not automatically run again when a prop updates. 
-
-```svelte
-<script>
-	let count = $state(0);  
-	// this will only set `doubled` on component creation
-	// it will not update when `count` does
-	let doubled = count * 2;
-</script>
-```
-
-We can make any variable based on others reactive by declaring them a Derived state using the `$derived` rune:
+Derived state is declared with the `$derived` rune:
 
 ```svelte
 <script>
@@ -33,6 +21,8 @@ The expression inside `$derived(...)` should be free of side-effects. Svelte wil
 
 As with `$state`, you can mark class fields as `$derived`.
 
+> [!NOTE] Code in Svelte components is only executed once at creation, without the `$derived` rune `double` would maintain it's original value.
+
 ## `$derived.by`
 
 Sometimes you need to create complex derivations that don't fit inside a short expression. In these cases, you can use `$derived.by` which accepts a function as its argument.