Why reactivity drives UI updates in Svelte - See It in Action

Why Reactivity Drives UI Updates in Svelte

📖 Scenario: You are building a simple Svelte app that shows a counter. When the user clicks a button, the counter number updates on the screen automatically. This happens because Svelte uses reactivity to update the UI whenever the data changes.

🎯 Goal: Build a Svelte component that uses a reactive variable to update the displayed counter number when a button is clicked.

📋 What You'll Learn

Create a variable called count initialized to 0.

Create a reactive statement that doubles the count value into a variable called double.

Add a button that increments count by 1 when clicked.

Display both count and double values in the UI.

💡 Why This Matters

🌍 Real World

Reactivity is the core of modern UI frameworks like Svelte. It lets apps update the screen instantly when data changes, making apps feel fast and smooth.

💼 Career

Understanding reactivity helps you build interactive web apps efficiently, a key skill for frontend developer roles.

1

Set up the initial counter variable

Create a variable called count and set it to 0 inside the <script> tag.

Svelte

// Create a variable called count and set it to 0
// Your code here


Increment
Count: 0
Double: 0

Need a hint?

Use let count = 0; inside the <script> tag to create the variable.

2

Add a reactive statement to double the count

Add a reactive statement that creates a variable called double which is always twice the value of count. Use the $: syntax inside the <script> tag.

Svelte

  let count = 0;

  // Add a reactive statement to set double to count * 2
  // Your code here


Increment
Count: 0
Double: 0

Need a hint?

Use $: double = count * 2; to create a reactive variable that updates when count changes.

3

Make the button increment the count

Add an on:click event to the <button> that increases the count variable by 1 when clicked.

Svelte

  let count = 0;
  $: double = count * 2;


Increment
Count: 0
Double: 0

Need a hint?

Use on:click={() => count += 1} on the button to update the count.

4

Display the count and double values in the UI

Replace the static numbers inside the <p> tags with the reactive variables {count} and {double} so the UI updates automatically.

Svelte

  let count = 0;
  $: double = count * 2;


 count += 1}>Increment
Count: {/* Replace 0 with count */}
Double: {/* Replace 0 with double */}

Need a hint?

Use curly braces like {count} and {double} inside the paragraphs to show the variables.