Svelte Reactivity

:dart: Learning Objectives

By the end of this lesson, you will be able to:

• Understand what reactivity means in Svelte
• Use assignment operators to create reactive components
• Create reactive declarations with the $: syntax
• Write reactive statements that run when values change
• Build interactive components that update automatically

What is Svelte Reactivity? :emoji:

:information_source: Info Svelte reactivity connects to JavaScript's DOM (Document Object Model). When a user changes values on your website, reactivity makes those changes appear automatically in the DOM - no extra code needed!

How to Make Components Reactive :hammer_and_wrench:

Using Assignment Operators

Making your Svelte components reactive is simple:

• Assignment operator (=): The easiest way to trigger reactivity
• Top-level variables: Variables that Svelte watches for changes
• Automatic updates: When you change a top-level variable, Svelte updates your component

:bulb: Tip What's a Top-Level Variable? A top-level variable is any variable you create directly inside the <script> tag. It's not inside a function or block - it sits at the "top level" of your script!

Let's see how reactivity works with a simple example:

app.svelte

<script>
  let number = 0;
  
  function updateNum() \{
    number = 25;
  \}
</script>

<button on:click=\{updateNum\}>Update</button>
<p>\{number\}</p>

Output BEFORE the button is clicked:

Output AFTER the button is clicked:

Understanding the Example

In our example:

• number is our top-level variable (it's directly in the <script> tag)
• When we click the button, updateNum() changes number to 25
• Svelte sees this change and updates the display automatically

:memo: Key Insight Svelte watches for assignments to top-level variables. When it sees number = 25, it knows to update everything that uses number in your component!

Reactive Declarations :bulb:

Sometimes you need values that depend on other values. Svelte has a special syntax for this!

The Magic $: Syntax

• Purpose: Create values that automatically update when their dependencies change
• Syntax: Use $: (dollar sign + colon) before your declaration
• Auto-update: These values recalculate whenever their dependencies change

Let's see it in action:

app.svelte

<script>
  let number = 0;
  $: add_with_two = number + 2;
  
  function clickButton() \{
    number = number + 1;
  \}
</script>

<button on:click=\{clickButton\}>
  Clicked \{number\} time
</button>

<p>\{number\} add with 2 is \{add_with_two\}</p>

Output BEFORE the button is clicked:

Output AFTER the button is clicked 1 time:

Output AFTER the button is clicked 2 times:

How It Works

Looking at our example:

• add_with_two depends on number
• Every time number changes, add_with_two recalculates
• The display updates automatically to show the new result

:bulb: Tip Try This! Without $:, the add_with_two value would stay at 2 forever, even when number changes. The reactive declaration makes it update automatically!

Reactive Statements :rocket:

Reactive declarations aren't just for values - you can run any code reactively!

Running Code When Values Change

• Any statement works: Use $: with if statements, console.log, or any JavaScript
• Automatic execution: Code runs whenever dependencies change
• Perfect for: Alerts, logging, or conditional actions

Here's how to use reactive statements with conditions:

app.svelte

<script>
  let number = 0;
  $: if (number > 3) \{
    alert(`You clicked more than 3 times!`);
    alert(`You have clicked ` + number + ` times`);
  \}
  
  function clickButton() \{
    number = number + 1;
  \}
</script>

<button on:click=\{clickButton\}>
  Clicked \{number\} time
</button>

Output BEFORE the button is clicked:

Output AFTER the button is clicked 4 times:

What's Happening Here?

In this example:

• The $: makes the if statement reactive
• Every time number changes, Svelte checks the condition
• When number goes above 3, the alerts trigger automatically

:memo: Important! Without $:, the if statement would only run once when the component loads. The reactive declaration makes it check the condition every time number changes!

Multiple Reactive Statements :package:

Need to run several things when a value changes? You can group multiple statements together!

Grouping Reactive Code

Use curly braces {} to run multiple statements reactively:

app.svelte

<script>
  let number = 0;
  $: \{
    console.log("---");
    console.log("Number of times clicked:", number);
  \}
  
  function clickButton() \{
    number = number + 1;
  \}
</script>

<button on:click=\{clickButton\}>
  Click me
</button>

Output BEFORE the button is clicked:

Output AFTER the button is clicked 3 times:

Why Use Multiple Statements?

This pattern is useful for:

• Debugging: Log multiple values at once
• Complex Updates: Run several related operations together
• Clean Code: Keep related reactive code organized

:memo: Console Tip Check your browser's Developer Console (F12) to see the console.log outputs. It's a great way to debug your reactive code!

:memo: Summary

Let's recap what we learned about Svelte Reactivity:

Key Takeaways

1. Automatic Updates: Svelte makes your UI update automatically when data changes
2. Top-Level Variables: Variables in your <script> tag are reactive by default
3. Assignment Operators: Use = to trigger reactivity
4. Reactive Declarations: Use $: to create values that depend on other values
5. Reactive Statements: Use $: to run code when values change
6. Multiple Statements: Group reactive code with {}

:bulb: Tip Remember This! The magic of Svelte is that you write normal JavaScript, and Svelte makes it reactive. No special methods or complex state management needed!

:dart: Practice Time!

Try these exercises to master Svelte reactivity:

Exercise One: Counter with Double Value

Create a component with:

• A counter that starts at 0
• A button to increment the counter
• Display both the counter and its double value (using reactive declaration)

Exercise 2: Temperature Converter

Build a component that:

• Has an input for Celsius temperature
• Shows the Fahrenheit conversion using $:
• Updates in real-time as you type

Exercise 3: Alert System

Create a component with:

• A score counter
• Buttons to increase/decrease the score
• A reactive statement that shows an alert when score reaches 10

Challenge: Shopping Cart

Build a mini shopping cart that:

• Tracks item count
• Uses reactive declarations for total price
• Shows a "free shipping" message when total exceeds $50

Ready to build amazing reactive components? Watch the video above and start coding! :rocket: