Svelte Reactivity Explained — Reactive Declarations and Statements

In this tutorial, you will learn about Svelte Reactivity Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Svelte's reactivity is compiler-driven: the compiler tracks variable assignments and automatically updates the DOM when dependent values change.

What You'll Learn

• Reactive declarations ($:)
• Reactive statements
• Assignment-based reactivity
• Updating arrays and objects
• Reactive labels

Why It Matters

Svelte's reactivity is simpler than React's hooks or Vue's ref system. Any top-level variable is reactive by assignment, and $: creates derived reactive values.

<script>
  let price = 100;
  let quantity = 2;
  let taxRate = 0.08;

  $: subtotal = price * quantity;
  $: tax = subtotal * taxRate;
  $: total = subtotal + tax;

  $: if (total > 500) {
    console.log("Large order!");
  }

  $: discount = total > 1000 ? 50 : 0;
  $: finalTotal = total - discount;

  function updatePrice() { price = 150; }
</script>

<p>Price: ${price}</p>
<p>Quantity: {quantity}</p>
<input type="range" bind:value={quantity} min={1} max={10} />
<p>Subtotal: ${subtotal}</p>
<p>Tax: ${tax.toFixed(2)}</p>
<p>Total: ${total.toFixed(2)}</p>
<p>Discount: ${discount}</p>
<p><strong>Final: ${finalTotal.toFixed(2)}</strong></p>
<button on:click={updatePrice}>Set Price to $150</button>

Expected output: Total, tax, and discount values update reactively when price or quantity changes.