From 65ca69a42c74252cec9483709357d845c345eefb Mon Sep 17 00:00:00 2001
From: razinshafayet <sumonislamk29@gmail.com>
Date: Mon, 16 Feb 2026 20:15:55 +0600
Subject: [PATCH] better example

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

diff --git a/documentation/docs/02-runes/03-$derived.md b/documentation/docs/02-runes/03-$derived.md
index 28ac63536e..6178f72b3d 100644
--- a/documentation/docs/02-runes/03-$derived.md
+++ b/documentation/docs/02-runes/03-$derived.md
@@ -55,11 +55,20 @@ When you use `await` directly inside a `$derived(...)` expression (or a template
 
 ```svelte
 <script>
-	const slug = $derived(params.slug);          // tracked
-	const post = $derived(await getPost(slug));  // uses tracked slug
+	let id = $state(1);
+
+	async function getLater(get) {
+		await Promise.resolve(); // await inside helper
+		return get();            // reactive read happens after await
+	}
+
+	const trackedId = $derived(id); // tracked
+	const value = $derived(await getLater(() => trackedId));
 </script>
 ```
 
+Here, the helper `getLater` `await`s internally and only reads the reactive value afterwards via `get()`. Splitting `id` into `trackedId = $derived(id)` makes the dependency explicit before the async boundary, so `value` stays correctly tied to `id`.
+
 To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).
 
 ## Overriding derived values