Component file (.svelte) anatomy - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Svelte component render?

Given this Svelte component code, what will be the visible output in the browser?

Svelte

<script>
  let name = 'Anna';
</script>

<h1>Hello {name}!</h1>

A Error: name is not defined

B Hello {name}!

C Hello Anna!

D Hello !

💡 Hint

Look at how variables inside curly braces are replaced by their values.

The variable name is set to 'Anna'. Inside the HTML, {name} is replaced by its value, so the output is Hello Anna!

📝 Syntax

intermediate

Which part of this Svelte component is the script section?

Identify the script section in this Svelte component code.

Svelte

<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  Clicked {count} times
</button>

A <button on:click={() => count++}>\n Clicked {count} times\n</button>

B on:click={() => count++}

C Clicked {count} times

D <script>\n let count = 0;\n</script>

💡 Hint

The script section is where variables and logic are declared.

The <script> tags contain JavaScript code for the component. Here, let count = 0; is declared inside the script section.

❓ lifecycle

advanced

What lifecycle function runs after the component is first added to the page?

In Svelte, which lifecycle function runs only once after the component appears on the page?

A onMount

B beforeUpdate

C afterUpdate

D onDestroy

💡 Hint

Think about when you want to run code after the component is visible.

onMount runs once after the component is first added to the page. It is used for setup tasks like fetching data.

🔧 Debug

advanced

Why does this Svelte component fail to update the count?

This Svelte component does not update the displayed count when the button is clicked. Why?

Svelte

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

<button on:click={increment}>
  Count: {state.count}
</button>

A The count variable is not reactive because it is not declared with $: or a store

B The on:click event syntax is incorrect

C The increment function is not called on button click

D The count variable is declared inside the button element

💡 Hint

Top-level `let` variables trigger updates on reassignment. Object property mutations do not.

In Svelte, mutating a property of an object (like state.count += 1) does not trigger reactivity because there is no top-level reassignment. Svelte requires reassigning the object reference, e.g. state = { ...state, count: state.count + 1 };, or using a store for shared/mutable state. The count is not a top-level reactive variable.

🧠 Conceptual

expert

What is the role of the