Reactive Declarations for Complex Logic

Snippet

Reactive Declarations for Complex Logic

Svelte's reactive declarations ($:) automatically re-evaluate whenever their dependencies (like 'price' or 'taxRate') change. They can be used to derive state or to trigger side effects (like logging or API calls) in response to state changes without needing manual listeners.

snippet.js
javascript
<script>
  export let price = 0;
  export let taxRate = 0.19;
 
  $: total = price * (1 + taxRate);
  $: isExpensive = total > 1000;
 
  $: if (isExpensive) {
    console.warn('High value item detected!');
  }
</script>

svelte

Breakdown

$: total = price * (1 + taxRate);

Declares 'total' as a reactive variable that updates whenever price or taxRate changes.

$: if (isExpensive) { ... }

A reactive statement used as a side effect, executing logic whenever 'isExpensive' becomes true.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Reactive Declarations for Complex Logic

Related