From 890d7f8b986dbe0eb5dd1d7cfed3614aed32c843 Mon Sep 17 00:00:00 2001 From: okxint Date: Sat, 29 Aug 2026 12:51:24 +0530 Subject: [PATCH] =?UTF-8?q?docs:=20fix=20await=5Fwaterfall=20workaround=20?= =?UTF-8?q?=E2=80=94=20use=20eager=20const,=20not=20lazy=20$derived?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The documentation suggested using `$derived(one())` to start promises before awaiting them. This does not eliminate the waterfall: `$derived` is lazy, so `one()` is still only called when `aPromise` is first read, which happens on the `$derived(await aPromise)` line — i.e. sequentially, after the first await completes. Fix: replace `$derived(one())` with `const aPromise = one()` so both functions are called eagerly before either await. Also add a NOTE that this only helps when the promise-creating functions do not themselves read reactive state, and that in the reactive case there is currently no workaround. Closes #16483 --- packages/svelte/messages/client-warnings/warnings.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md index ac2e103ffe..db9677826e 100644 --- a/packages/svelte/messages/client-warnings/warnings.md +++ b/packages/svelte/messages/client-warnings/warnings.md @@ -93,19 +93,21 @@ let b = $derived(await two()); (Note that if the values of `await one()` and `await two()` subsequently change, they can do so concurrently — the waterfall only occurs when the deriveds are first created.) -You can solve this by creating the promises first and _then_ awaiting them: +You can solve this by starting the promises _before_ awaiting them. Because `$derived` is lazy — the expression only runs when the value is first read — using `$derived(one())` does not help: `one()` still isn't called until `aPromise` is read for the first time, which happens on the `$derived(await aPromise)` line. Use plain `const` or `let` declarations so both functions are called eagerly, before either await runs: ```js async function one() { return 1 } async function two() { return 2 } // ---cut--- -let aPromise = $derived(one()); -let bPromise = $derived(two()); +const aPromise = one(); +const bPromise = two(); let a = $derived(await aPromise); let b = $derived(await bPromise); ``` +> [!NOTE] This approach only eliminates the waterfall when `one()` and `two()` do not themselves depend on reactive state. If the promise-creating expressions read `$state` or `$derived` values, there is currently no way to avoid the waterfall. + ## binding_property_non_reactive > `%binding%` is binding to a non-reactive property