});

Note that if you destructure a reactive value, the references are not reactive — as in normal JavaScript, they are evaluated at the point of destructuring:

In Svelte there are two types of reaction —[`$derived`](/docs/svelte/$derived) and[`$effect`](/docs/svelte/$effect). Deriveds can be created anywhere, because they run_lazily_ and can be[garbage collected](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection) if nothing references them. Effects, by contrast, keep running eagerly whenever their dependencies change, until they are destroyed.

Because of this, effects can only be created inside other effects (or[effect roots](/docs/svelte/$effect#$effect.root), such as the one that is created when you first mount a component) so that Svelte knows when to destroy them.

Some sleight of hand occurs when a derived contains an`await` expression: Since waiting until we read`{await getPromise()}` to call`getPromise` would be too late, we use an effect to instead call it proactively, notifying Svelte when the value is available. But since we're using an effect, we can only create asynchronous deriveds inside another effect.

The`flushSync()` function can be used to flush any pending effects synchronously. It cannot be used if effects are currently being flushed — in other words, you can call it after a state change but_not_ inside an effect.

This restriction only applies when using the`experimental.async` option, which will be active by default in Svelte 6.

This restriction only applies when using the`experimental.async` option, which will be active by default in Svelte 6.

}

Detected reactivity loss when reading`%name%`.This happens when state is readin anasyncfunction after an earlier `await`

```

Svelte's signal-based reactivity works by tracking which bits of state are read when a template or `$derived(...)` expression executes. If an expression contains an `await`, Svelte transforms it such that any state _after_ the `await` is also tracked — in other words, in a case like this...

```js

let a = Promise.resolve(1);

let b = 2;

let total = $derived(await a + b);

```

...both `a` and `b` are tracked, even though `b` is only read once `a` has resolved, after the initial execution.

This does _not_ apply to an `await` that is not 'visible' inside the expression. In a case like this...

```js

let a = Promise.resolve(1);

let b = 2;

async function sum() {

returnawait a+ b;

}

let total=$derived(awaitsum());

...`total` will depend on`a` (which is read immediately) but not`b` (which is not). The solution is to pass the values into the function:

```js

let a=Promise.resolve(1);

let b=2;

asyncfunctionsum(a,b) {

returnawait a+ b;

}

let total=$derived(awaitsum(a, b));

Anasync derived,`%name%` (%location%) was not read immediately after itresolved.This often indicates an unnecessary waterfall, which can slow down your app

```js

asyncfunctionone() {return1 }

asyncfunctiontwo() {return2 }

let a=$derived(awaitone());

let b=$derived(awaittwo());

...the second`$derived` will not be created until the first one has resolved. Since`awaittwo()` does not depend on the value of`a`, this delay, often described as a 'waterfall', is unnecessary.

(Note that if the values of`awaitone()` and`awaittwo()` subsequently change, they can do so concurrently — the waterfall only occurs when the deriveds are first created.)

```js

asyncfunctionone() {return1 }

asyncfunctiontwo() {return2 }

let aPromise=$derived(one());

let bPromise=$derived(two());

let a=$derived(await aPromise);

let b=$derived(await bPromise);

The`await` keyword can only appear in a`$derived(...)` or template expression, or at the top level of a component's`<script>` block, if it is inside a[`<svelte:boundary>`](/docs/svelte/svelte-boundary) that has a`pending` snippet:

This restriction may be lifted in a future version of Svelte.

onDestroy,

onMount,

setContext,

settled,

tick,

unmount,

<blockquoteclass="since note">

Available since 5.36

</blockquote>

Returns a promise that resolves once any state changes, and asynchronous work resulting from them,

have resolved and the DOM has been updated

<divclass="ts-block">

</div>

Returns a promise that resolves once any pending state changes have been applied.

A function that gets a`Warning` as an argument and returns a boolean.

Use this to filter out warnings. Return`true` to keep the warning,`false` to discard it.

</div>

</div>

<divclass="ts-block-property">

<divclass="ts-block-property-details">

<divclass="ts-block-property-bullets">

- <spanclass="tag since">available since</span> v5.36

</div>

Experimental options

<divclass="ts-block-property-children"><divclass="ts-block-property">

<divclass="ts-block-property-details">

<divclass="ts-block-property-bullets">

- <spanclass="tag since">available since</span> v5.36

</div>

Allow`await` keyword in deriveds, template expressions, and the top level of components

</div>

</div></div>

</div>

</div></div>