Reactive Declaration in Svelte: What It Is and How It Works

In Svelte, a reactive declaration is a special syntax using $: that automatically updates a value when its dependencies change. It lets you write code that reacts to changes without manually tracking or updating state.

How It Works

Reactive declaration in Svelte works like a smart assistant that watches certain values and updates related values automatically when those change. Imagine you have a plant that needs watering based on the weather. Instead of checking the weather yourself every hour, you set up a system that automatically waters the plant when it detects rain or dryness. This is similar to how reactive declarations work.

In Svelte, you write $: newValue = oldValue + 1; and Svelte will run this line whenever oldValue changes. This means you don't have to write extra code to keep newValue in sync. It saves time and reduces bugs by handling updates behind the scenes.

Example

This example shows a reactive declaration that updates double whenever count changes.

svelte

<script>
  let count = 0;
  $: double = count * 2;
</script>

<button on:click={() => count++} aria-label="Increase count">Increment</button>
<p>Count: {count}</p>
<p>Double: {double}</p>

Output

Button labeled 'Increment' that increases count. Below it shows 'Count: 0' and 'Double: 0' initially. Clicking button updates count and double automatically.

When to Use

Use reactive declarations when you want to keep some values automatically updated based on others without writing extra functions or event handlers. They are great for calculations, formatting, or any derived data that depends on state.

For example, if you have a shopping cart, you can use reactive declarations to update the total price whenever items or quantities change. This keeps your code clean and easy to read.

Key Points

• Use $: before a statement to make it reactive.
• It runs automatically when any referenced variable changes.
• Helps keep derived values in sync without manual updates.
• Improves code clarity and reduces bugs.

Key Takeaways

Reactive declarations use $: to auto-update values when dependencies change.

They simplify keeping related data in sync without extra code.

Ideal for calculations or derived state in Svelte components.

Make your code cleaner and less error-prone by using reactive declarations.