`$effect.active` docs (#9598)

* docs: $effect.active

* link

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
pull/9599/head
Rich Harris 8 months ago committed by GitHub
parent c837771ca6
commit f40efb2027
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -168,6 +168,24 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
Previously, you would have used `beforeUpdate`, which — like `afterUpdate` — is deprecated in Svelte 5.
## `$effect.active`
The `$effect.active` rune is an advanced feature that tells you whether or not the code is running inside an effect or inside your template ([demo](/#H4sIAAAAAAAAE3XP0QrCMAwF0F-JRXAD595rLfgdzodRUyl0bVgzQcb-3VYFQfExl5tDMgvrPCYhT7MI_YBCiiOR2Aq-UxnSDT1jnlOcRlMSlczoiHUXOjYxpOhx5-O12rgAJg4UAwaGhDyR3Gxhjdai4V1v2N2wqus9tC3Y3ifMQjbehaqq4aBhLtEv_Or893icCsdLve-Caj8nBkU67zMO5HtGCfM3sKiWNKhV0zwVaBqd3x3ixVmHFyFLuJyXB-moOe8pAQAA)):
```svelte
<script>
console.log('in component setup:', $effect.active()); // false
$effect(() => {
console.log('in effect:', $effect.active()); // true
});
</script>
<p>in template: {$effect.active()}</p> <!-- true -->
```
This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects.
## `$props`
To declare component props, use the `$props` rune:

Loading…
Cancel
Save