Compiler-based approach (no virtual DOM) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Svelte component?

Consider this Svelte component code:

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>Clicked {count} times</button>

What will the button display after clicking it 3 times?

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>Clicked {count} times</button>

A Clicked NaN times

B Clicked count times

C Clicked 0 times

D Clicked 3 times

💡 Hint

Think about how the count variable changes on each click and how Svelte updates the DOM.

Each click calls increment which adds 1 to count. After 3 clicks, count is 3, so the button shows "Clicked 3 times".

📝 Syntax

intermediate

Which option causes a syntax error in Svelte?

Which of these Svelte snippets will cause a syntax error when compiled?

A <script>let flag = true;</script><p>{#if flag}Yes{/if}</p>

B <script>let count = 0;</script><button on:click={count++}>Click</button>

C <script>let items = [1,2,3];</script><ul>{#each items as item}<li>{item}</li>{/each}</ul>

D <script>let name = 'Svelte';</script><p>Hello {name}!</p>

💡 Hint

Check how event handlers expect functions, not expressions.

Option B uses count++ directly in the event handler, which is an expression, not a function. Svelte expects a function reference or inline function for on:click. This causes a syntax error.

🔧 Debug

advanced

Why does this Svelte component not update the UI on state change?

Look at this Svelte code:

<script>
  let obj = { value: 0 };
  function increment() {
    obj.value += 1;
  }
</script>

<button on:click={increment}>Value: {obj.value}</button>

Clicking the button does not update the displayed value. Why?

Svelte

<script>
  let obj = { value: 0 };
  function increment() {
    obj.value += 1;
  }
</script>

<button on:click={increment}>Value: {obj.value}</button>

A Svelte does not detect changes inside objects unless the object reference changes

B Svelte requires a store to update nested object properties

C The variable obj is not declared with let

D The increment function is not called on click

💡 Hint

Think about how Svelte tracks changes to variables.

Svelte tracks reactivity by variable assignments. Changing a property inside an object does not change the object reference, so Svelte does not update the UI. To fix, reassign the object: obj = {...obj, value: obj.value + 1}.

🧠 Conceptual

advanced

What is a key advantage of Svelte's compiler-based approach over virtual DOM frameworks?

Choose the best explanation for why Svelte does not use a virtual DOM.

A Svelte requires manual DOM updates by the developer to improve performance

B Svelte uses a virtual DOM but hides it from the developer for simplicity

C Svelte compiles components to efficient imperative code that updates the DOM directly, reducing runtime overhead

D Svelte delays DOM updates until all components finish rendering to batch changes

💡 Hint

Think about how Svelte generates code before the app runs.

Svelte compiles your code into small, efficient JavaScript that updates the DOM directly without the overhead of diffing a virtual DOM at runtime. This leads to faster updates and smaller bundles.

❓ state_output

expert

What is the final rendered output after these state changes in Svelte?

Given this Svelte component:

<script>
  let count = 1;
  $: doubled = count * 2;
  function update() {
    count = 3;
    count = 5;
  }
</script>

<button on:click={update}>Count: {count}, Doubled: {doubled}</button>

What will the button display after clicking it once?

Svelte

<script>
  let count = 1;
  $: doubled = count * 2;
  function update() {
    count = 3;
    count = 5;
  }
</script>

<button on:click={update}>Count: {count}, Doubled: {doubled}</button>

A Count: 5, Doubled: 10

B Count: 3, Doubled: 6

C Count: 1, Doubled: 2

D Count: 5, Doubled: 6

💡 Hint

Consider how Svelte processes reactive statements and variable assignments.

The function update sets count to 3, then immediately to 5. Only the last assignment matters. The reactive statement recalculates doubled as 5 * 2 = 10. So the button shows "Count: 5, Doubled: 10".