Derived values with $: in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component?

Consider this Svelte component using a derived value with $:

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

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

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

Svelte

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

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

A Doubled: 8

B Doubled: 6

C Doubled: 12

D Doubled: 10

💡 Hint

Remember the initial count and how many times it increments.

The initial count is 2. Clicking 3 times increments count to 5. The derived value doubled is 5 * 2 = 10 (option D).

❓ state_output

intermediate

What is the value of 'fullName' after updating 'lastName'?

Given this Svelte code:

  <script>
    let firstName = 'Jane';
    let lastName = 'Doe';
    $: fullName = `${firstName} ${lastName}`;
  </script>

  <button on:click={() => lastName = 'Smith'}>Change Last Name</button>
  <p>Full Name: {fullName}</p>

What will be displayed after clicking the button once?

Svelte

  <script>
    let firstName = 'Jane';
    let lastName = 'Doe';
    $: fullName = `${firstName} ${lastName}`;
  </script>

  <button on:click={() => lastName = 'Smith'}>Change Last Name</button>
  <p>Full Name: {fullName}</p>

A Full Name: Jane Doe

B Full Name: undefined Smith

C Full Name: Jane Smith

D Full Name: Smith Jane

💡 Hint

Derived values update automatically when dependencies change.

When lastName changes to 'Smith', the derived fullName updates to 'Jane Smith'.

📝 Syntax

advanced

Which option correctly declares a derived value with $: in Svelte?

Which of these code snippets correctly uses the $: syntax to create a derived value?

A let $: total = price + tax;

B $: total = price + tax;

C $ total = price + tax;

D total $: = price + tax;

💡 Hint

The $: label is used before the statement without let.

Option B correctly uses $: to declare a reactive statement. Options B, C, and D have invalid syntax.

🔧 Debug

advanced

Why does this derived value not update as expected?

Look at this Svelte code:

  <script>
    let a = 1;
    let b = 2;
    $: sum = a + b;

    function updateA() {
      a = a + 1;
    }
  </script>

  <button on:click={updateA}>Update A</button>
  <p>Sum: {sum}</p>

After clicking the button, the sum does not update. What is the likely cause?

Svelte

  <script>
    let a = 1;
    let b = 2;
    $: sum = a + b;

    function updateA() {
      a = a + 1;
    }
  </script>

  <button on:click={updateA}>Update A</button>
  <p>Sum: {sum}</p>

A There is no issue; the sum updates correctly when 'a' changes.

B The function 'updateA' is not called correctly in the button's on:click.

C The derived value 'sum' is not reactive because 'b' never changes.

D The variable 'a' is not reactive because it is not declared with 'let'.

💡 Hint

Check how Svelte tracks reactive variables and updates.

Variables declared with 'let' are reactive. Changing 'a' triggers the derived value 'sum' to update. The sum updates correctly.

🧠 Conceptual

expert

How does Svelte's $: reactive statement differ from React's useMemo?

Which statement best describes the difference between Svelte's $: reactive statements and React's useMemo hook?

A <code>$:</code> automatically tracks dependencies without explicit listing, while <code>useMemo</code> requires dependency arrays.

B <code>$:</code> runs only once on mount, <code>useMemo</code> runs on every render.

C <code>$:</code> is used only for side effects, <code>useMemo</code> caches values.

D <code>$:</code> requires manual dependency tracking, <code>useMemo</code> tracks dependencies automatically.

💡 Hint

Think about how dependencies are declared and tracked in both.

Svelte's $: reactive statements automatically track all variables used inside them. React's useMemo requires you to list dependencies explicitly in an array.