From 7a327fa76f210c06af3f392b07af6733c223509c Mon Sep 17 00:00:00 2001
From: skepticattus <minhyh0987@gmail.com>
Date: Thu, 23 Jul 2026 12:17:54 +0700
Subject: [PATCH] document pattern of extracting async callback into a separate
 function in $derived

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

diff --git a/documentation/docs/02-runes/03-$derived.md b/documentation/docs/02-runes/03-$derived.md
index 82d7ebda1b..d28db71d69 100644
--- a/documentation/docs/02-runes/03-$derived.md
+++ b/documentation/docs/02-runes/03-$derived.md
@@ -91,8 +91,8 @@ let minAge = $state(18);
 let maxAge = $state(30);
 
 let query = $derived.by(() => {
-	// Read dependencies synchronously so they are tracked
-	void minAge, maxAge;
+	+++// Read dependencies synchronously so they are tracked+++
+	+++void minAge, maxAge;+++
 
 	return liveQuery(async () => {
 		// Values read inside this callback are not tracked automatically
@@ -104,6 +104,44 @@ let query = $derived.by(() => {
 });
 ```
 
+Alternatively, you can extract the asynchronous callback into a separate function and pass the reactive values as arguments, which are evaluated synchronously:
+
+```js
+// @filename: ambient.d.ts
+declare module 'dexie' {
+	export class Dexie {
+		constructor(databaseName: string);
+		users: {
+			where(key: string): {
+				between(min: number, max: number): {
+					toArray(): Promise<any[]>;
+				};
+			};
+		};
+	}
+	export function liveQuery<T>(querier: () => T | Promise<T>): any;
+}
+
+// @filename: index.js
+import { Dexie, liveQuery } from 'dexie';
+
+const db = new Dexie('UserDatabase');
+let minAge = $state(18);
+let maxAge = $state(30);
+// ---cut---
++++function createUserQuery(minAge, maxAge) {+++
+	return liveQuery(async () => {
+		return await db.users
+			.where('age')
+			.between(minAge, maxAge)
+			.toArray();
+	});
+}
+
+// minAge and maxAge are read synchronously when the function is called
+let query = $derived(+++createUserQuery(minAge, maxAge)+++);
+```
+
 To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).
 
 ## Overriding derived values