Svelte Reactivity

Reactivity means the page updates itself automatically whenever the data behind it changes. Svelte watches your variables and refreshes only the exact page parts tied to a changed value.

How Reactivity Works

Assigning a new value to a variable triggers Svelte to check which parts of the page depend on that variable. Svelte then updates only those parts, leaving the rest of the page untouched.

<script>
  let score = 0;

  function addPoint() {
    score = score + 1;
  }
</script>

<button on:click={addPoint}>Add Point</button>
<p>Score: {score}</p>

Clicking the button changes score, and Svelte updates the paragraph text immediately. You never write a separate line of code telling the browser to refresh that paragraph.

Reactivity Flow Diagram

User Clicks Button
        |
        v
addPoint() runs
        |
        v
score = score + 1
        |
        v
Svelte detects the change
        |
        v
Paragraph text updates on screen

Reactivity With Arrays And Objects

Svelte tracks simple variable assignments automatically, but arrays and objects need a small extra step. Pushing a new item into an array does not trigger an update by itself, since the array reference stays the same.

<script>
  let items = ["Pen", "Book"];

  function addItem() {
    items.push("Bag");   // This alone will not update the page
    items = items;        // This reassignment tells Svelte to update
  }
</script>

The second line looks unusual at first glance, but it gives Svelte a clear signal that the array changed. A cleaner approach uses the spread syntax shown below.

<script>
  let items = ["Pen", "Book"];

  function addItem() {
    items = [...items, "Bag"];
  }
</script>

This line builds a brand new array containing the old items plus the new one, then assigns it to items. Svelte sees the assignment and updates the page right away.

Reactive Statements

A reactive statement recalculates a value automatically whenever the values it depends on change. Svelte marks these statements using a dollar sign followed by a colon.

<script>
  let price = 100;
  let quantity = 2;
  $: total = price * quantity;
</script>

<p>Total: {total}</p>

Changing either price or quantity recalculates total automatically. You never call a function manually to refresh this value.

A Layman Analogy

Think of reactivity as a row of dominoes standing close together. Tipping the first domino, which represents your variable, knocks down every domino connected to it, which represents the page parts showing that variable. Dominoes standing far away, unrelated to the first one, stay standing untouched.

Common Mistakes To Avoid

• Forgetting to reassign a variable after changing an array or object
• Expecting a function call alone to trigger a page update without an assignment
• Overusing reactive statements for values that never actually change

Reactive Statements With Multiple Dependencies

A reactive statement can depend on more than one variable at once, recalculating whenever any of those variables change.

<script>
  let width = 10;
  let height = 5;
  $: area = width * height;
  $: perimeter = 2 * (width + height);
</script>

<p>Area: {area}, Perimeter: {perimeter}</p>

Changing either width or height recalculates both area and perimeter automatically, keeping every displayed number accurate without extra function calls scattered through your code.

Key Points

• Svelte updates the page automatically after a variable assignment
• Arrays and objects need a fresh assignment to trigger updates
• Reactive statements recalculate values whenever their dependencies change
• Only the page parts tied to a changed value get refreshed