If blocks ({#if}) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component render?

Consider this Svelte component code:

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

{#if count > 5}
  <p>Count is greater than 5</p>
{:else if count > 0}
  <p>Count is positive but 5 or less</p>
{:else}
  <p>Count is zero or negative</p>
{/if}

What will be rendered in the browser?

Svelte

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

{#if count > 5}
  <p>Count is greater than 5</p>
{:else if count > 0}
  <p>Count is positive but 5 or less</p>
{:else}
  <p>Count is zero or negative</p>
{/if}

A No output rendered

B <p>Count is zero or negative</p>

C <p>Count is greater than 5</p>

D <p>Count is positive but 5 or less</p>

💡 Hint

Check the value of count and which condition matches first.

The variable count is 3, which is greater than 0 but not greater than 5. So the {:else if} block runs, rendering 'Count is positive but 5 or less'.

📝 Syntax

intermediate

Identify the syntax error in this Svelte if block

Which option correctly fixes the syntax error in this Svelte code?

{#if isActive}
  <p>Active</p>
{:else}
  <p>Inactive</p>
{/if

Svelte

{#if isActive}
  <p>Active</p>
{:else}
  <p>Inactive</p>
{/if

A Remove the closing {/if block entirely

B Change {/if to {/if} to close the block properly

C Add a semicolon after {/if to fix syntax

D Replace {:else} with {:else if} to fix the error

💡 Hint

Check the closing tag of the if block carefully.

The closing tag {/if} must have a closing brace '}'. The code is missing it, causing a syntax error.

❓ state_output

advanced

What is the output after clicking the button twice?

Given this Svelte component:

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

{#if count % 2 === 0}
  <p>Even count: {count}</p>
{:else}
  <p>Odd count: {count}</p>
{/if}

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

What will the paragraph show after clicking the button two times?

Svelte

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

{#if count % 2 === 0}
  <p>Even count: {count}</p>
{:else}
  <p>Odd count: {count}</p>
{/if}

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

A <p>Even count: 2</p>

B <p>Odd count: 2</p>

C <p>Even count: 1</p>

D <p>Odd count: 1</p>

💡 Hint

Count how many times the button increments and check parity.

Starting at 0 (even), after two increments count is 2, which is even, so the even block renders.

🔧 Debug

advanced

Why does this Svelte if block not update on variable change?

This component does not update the displayed text when the button is clicked:

<script>
  let visible = false;
  function toggle() {
    visible = !visible;
  }
</script>

{#if visible}
  <p>Visible</p>
{/if}

<button on:click={toggle}>Toggle</button>

What is the most likely reason the paragraph never appears?

Svelte

<script>
  let visible = false;
  function toggle() {
    visible = !visible;
  }
</script>

{#if visible}
  <p>Visible</p>
{/if}

<button on:click={toggle}>Toggle</button>

A The code is correct; the paragraph should appear when button is clicked

B The variable 'visible' is not reactive because it is not declared with $: prefix

C The component does not re-render because 'visible' is not reassigned properly

D The toggle function does not update 'visible' because it lacks a return statement

💡 Hint

Svelte tracks changes to let variables automatically.

In Svelte, reassigning a let variable triggers updates automatically. The code is correct and the paragraph will appear when the button is clicked.

🧠 Conceptual

expert

How does Svelte optimize {#if} blocks during compilation?

Which statement best describes how Svelte handles {#if} blocks when compiling components?

A Svelte compiles all possible {#if} block contents into the DOM and toggles their visibility with CSS

B Svelte uses a virtual DOM diffing algorithm to update the UI when {#if} conditions change

C Svelte compiles {#if} blocks into JavaScript that adds or removes DOM nodes dynamically without a virtual DOM

D Svelte requires manual DOM manipulation code inside {#if} blocks to update the UI

💡 Hint

Think about how Svelte differs from React in updating the UI.

Svelte compiles {#if} blocks into efficient JavaScript that directly adds or removes DOM elements as needed, avoiding virtual DOM overhead.