Reactive declarations (let) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component?

Consider this Svelte component code:

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

  <button on:click={() => count++}>Increment</button>
  <p>Double: {double}</p>

What will be shown in the paragraph after clicking the button 3 times?

Svelte

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

<button on:click={() => count++}>Increment</button>
<p>Double: {double}</p>

A Double: 8

B Double: 6

C Double: 4

D Double: 2

💡 Hint

Remember that $: runs whenever count changes.

Starting from count = 1, clicking 3 times increments it to 4. The reactive declaration double = count * 2 updates to 8.

❓ state_output

intermediate

What is the value of sum after this code runs?

Given this Svelte script:

  <script>
    let a = 2;
    let b = 3;
    $: sum = a + b;
    a = 5;
  </script>

What is the final value of sum?

Svelte

<script>
  let a = 2;
  let b = 3;
  $: sum = a + b;
  a = 5;
</script>

A 5

B 8

C 2

D 3

💡 Hint

Reactive declarations update when their dependencies change.

Initially, sum = 2 + 3 = 5. Then a changes to 5, so sum updates to 5 + 3 = 8.

📝 Syntax

advanced

Which option correctly declares a reactive statement with let in Svelte?

Choose the valid syntax for a reactive declaration that updates total when x or y change.

A $: total = x + y;

B let $: total = x + y;

C $: let total = x + y;

D let total $: = x + y;

💡 Hint

Reactive declarations use $: before the statement without let.

In Svelte, reactive declarations do not use let inside the reactive statement. The variable must be declared separately.

🔧 Debug

advanced

Why does this reactive declaration not update as expected?

Look at this Svelte code:

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

    function increment() {
      count += 1;
      double = count * 3;
    }
  </script>

  <button on:click={increment}>Click</button>
  <p>Double: {double}</p>

Why does the paragraph show double as count * 2 instead of count * 3 after clicking?

Svelte

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

  function increment() {
    count += 1;
    double = count * 3;
  }
</script>

<button on:click={increment}>Click</button>
<p>Double: {double}</p>

A The variable double is not declared with let.

B The function increment does not update count correctly.

C Svelte does not allow assignments inside functions.

D The reactive declaration overwrites the manual assignment to double after increment runs.

💡 Hint

Think about how reactive declarations run after any change.

The reactive declaration $: double = count * 2; runs after count changes, overwriting the manual assignment double = count * 3; inside increment.

🧠 Conceptual

expert

What happens if a reactive declaration depends on itself in Svelte?

Consider this code snippet:

  <script>
    let a = 1;
    $: a = a + 1;
  </script>

What will happen when this component runs?

Svelte

<script>
  let a = 1;
  $: a = a + 1;
</script>

A Svelte will throw a compile-time error.

B The value of a will be 2 and stop updating.

C The component will enter an infinite loop and crash.

D The reactive declaration will be ignored.

💡 Hint

Think about what happens when a reactive statement changes the variable it depends on.

The reactive declaration updates a by adding 1, which triggers itself again, causing an infinite loop.