Default actions in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a default action returns false?

In Svelte, if a default action returns false, what is the effect on the event's default behavior?

Svelte

<script>
  function preventDefaultAction(node) {
    node.addEventListener('click', event => {
      event.preventDefault();
    });
    return false;
  }
</script>

<button use:preventDefaultAction on:click={() => alert('Clicked!')}>Click me</button>

A The code causes a runtime error because returning false is invalid.

B The button's default click behavior is not prevented, and the alert shows.

C The button's default click behavior is prevented, and the alert does not show.

D The button's default click behavior is prevented, but the alert still shows.

💡 Hint

Think about what returning false from a default action means in Svelte.

In Svelte, returning false from a default action does not automatically prevent the event's default behavior. You must explicitly call event.preventDefault() inside the event listener. Returning false alone has no effect.

📝 Syntax

intermediate

Which syntax correctly defines a default action in Svelte?

Choose the correct way to define and use a default action named highlight that adds a yellow background to an element.

A

<script>
  export default function highlight(node) {
    node.style.backgroundColor = 'yellow';
  }
</script>

<p use:highlight>This is highlighted</p>

B

<script>
  function highlight(node) {
    node.style.backgroundColor = 'yellow';
  }
</script>

<p use:highlight>This is highlighted</p>

C

<script>
  export function highlight(node) {
    node.style.backgroundColor = 'yellow';
  }
</script>

<p use:highlight>This is highlighted</p>

D

<script>
  export const highlight = (node) => {
    node.style.backgroundColor = 'yellow';
  };
</script>

<p use:highlight>This is highlighted</p>

💡 Hint

Default actions must be exported functions.

Default actions in Svelte must be exported functions so they can be used with use:. Option C correctly exports the function. Option B is not exported, so it won't work. Option A exports a default function, which is not how default actions are imported. Option D exports a constant function, which is valid syntax and recognized as an action.

🔧 Debug

advanced

Why does this default action not clean up event listeners?

Examine the default action below. Why might it cause a memory leak or unexpected behavior after the component is destroyed?

Svelte

export function trackClicks(node) {
  function onClick() {
    console.log('Clicked');
  }
  node.addEventListener('click', onClick);
}

A Because the event listener is added inside the function instead of outside.

B Because the action does not return a destroy function to remove the event listener.

C Because the function is not exported as default.

D Because the event listener callback is not an arrow function.

💡 Hint

Think about how Svelte cleans up actions when elements are removed.

Svelte expects default actions to return an object with a destroy method that cleans up any side effects like event listeners. Without this, the event listener remains attached even after the element is removed, causing memory leaks or unexpected behavior.

❓ state_output

advanced

What is the output when a default action updates a reactive variable?

Consider this Svelte component using a default action that increments a count on click. What is displayed after clicking the button twice?

Svelte

<script>
  import { onMount } from 'svelte';
  let count = 0;

  export function increment(node) {
    function onClick() {
      count += 1;
    }
    node.addEventListener('click', onClick);
    return {
      destroy() {
        node.removeEventListener('click', onClick);
      }
    };
  }
</script>

<button use:increment>Clicked {count} times</button>

A Clicked 0 times

B Clicked 1 times

C Clicked NaN times

D Clicked 2 times

💡 Hint

Consider if the default action can update component variables directly.

The default action runs outside Svelte's reactivity system. Updating count inside the action does not trigger reactive updates because count is not in scope inside the action function. The displayed count remains 0.

🧠 Conceptual

expert

Why use default actions instead of inline event handlers in Svelte?

Which reason best explains why default actions are preferred over inline event handlers for certain behaviors in Svelte?

A Default actions run faster than inline event handlers because they are compiled differently.

B Inline event handlers cannot access component variables, but default actions can.

C Default actions can encapsulate setup and cleanup logic tied to the element lifecycle, which inline handlers cannot.

D Default actions automatically prevent default browser behavior, inline handlers do not.

💡 Hint

Think about lifecycle and cleanup responsibilities.

Default actions allow you to run code when an element is created and clean up when it is destroyed. Inline event handlers only respond to events but do not manage setup or teardown. This makes default actions ideal for behaviors that need lifecycle management.

Practice

1. What is the main purpose of a default action in Svelte?

easy

A. To add behavior to an element when it is created and clean up when removed

B. To style an element with CSS automatically

C. To create a new component dynamically

D. To fetch data from an API when the page loads

Solution

1. Step 1: Understand what default actions do

   Default actions in Svelte run code when an element is created and can clean up when it is removed.

2. Step 2: Match purpose with options

   Only To add behavior to an element when it is created and clean up when removed describes adding behavior on creation and cleanup on removal, which matches default actions.

3. Final Answer:

   To add behavior to an element when it is created and clean up when removed -> Option A

4. Quick Check:

   Default actions add and clean behavior = B [OK]

Hint: Default actions run on element mount and cleanup on unmount [OK]

Common Mistakes:

• Confusing default actions with styling or data fetching
• Thinking default actions create components
• Assuming default actions only run once globally

2. Which of the following is the correct syntax to apply a default action named focus to an input element in Svelte?

easy

A. <input on:focus />

B. <input action:focus />

C. <input bind:focus />

D. <input use:focus />

Solution

1. Step 1: Recall Svelte default action syntax

   Default actions are applied using use:actionName on elements.

2. Step 2: Compare options with correct syntax

   <input use:focus /> uses use:focus, which is the correct way to apply the action.

3. Final Answer:

   <input use:focus /> -> Option D

4. Quick Check:

   Default action syntax = use:actionName [OK]

Hint: Use use: prefix to apply default actions [OK]

Common Mistakes:

• Using action: or on: instead of use:
• Confusing event handlers with actions
• Trying to bind actions like variables

3. Consider this Svelte code snippet:

function highlight(node) {
  node.style.backgroundColor = 'yellow';
  return {
    destroy() {
      node.style.backgroundColor = '';
    }
  };
}

<div use:highlight>Hello</div>

What will be the background color of the <div> when it is rendered?

medium

A. Yellow

B. No background color (default)

C. Red

D. Transparent

Solution

1. Step 1: Analyze the highlight action code

   The action sets backgroundColor to 'yellow' on the node when applied.

2. Step 2: Understand the effect on the <div>

   The <div> uses use:highlight, so its background color becomes yellow on render.

3. Final Answer:

   Yellow -> Option A

4. Quick Check:

   Action sets background to yellow = A [OK]

Hint: Default action runs on mount, sets style immediately [OK]

Common Mistakes:

• Thinking destroy runs immediately and clears color
• Confusing background color with text color
• Assuming no style changes without CSS

4. Given this default action code:

function logClick(node) {
  node.addEventListener('click', () => console.log('Clicked!'));
}

What is the main problem with this action?

medium

A. It should return a promise to work correctly

B. It uses an arrow function which is not allowed in actions

C. It does not remove the event listener when the element is removed

D. It must use use:logClick() with parentheses

Solution

1. Step 1: Check event listener management

   The action adds a click listener but does not remove it on cleanup.

2. Step 2: Understand Svelte action cleanup

   Actions should return an object with a destroy method to remove listeners and avoid memory leaks.

3. Final Answer:

   It does not remove the event listener when the element is removed -> Option C

4. Quick Check:

   Missing cleanup causes leaks = A [OK]

Hint: Always return destroy() to clean event listeners [OK]

Common Mistakes:

• Ignoring cleanup leads to memory leaks
• Thinking arrow functions are disallowed
• Assuming parentheses are required on use

5. You want to create a default action autoFocus that focuses an input element when it appears and logs "Focused" once. Which code correctly implements this behavior?

hard

A. function autoFocus(node) {
node.focus();
return {
update() {
console.log('Focused');
}
};
}

B. function autoFocus(node) {
node.focus();
console.log('Focused');
return {
destroy() {}
};
}

C. function autoFocus(node) {
setTimeout(() => node.focus(), 0);
console.log('Focused');
}

D. function autoFocus(node) {
node.addEventListener('focus', () => console.log('Focused'));
node.focus();
return {
destroy() {
node.removeEventListener('focus', () => console.log('Focused'));
}
};
}

Solution

1. Step 1: Focus element and log once on mount

   Calling node.focus() and logging immediately runs once when the element appears.

2. Step 2: Provide cleanup method

   Returning an object with an empty destroy method is valid and ensures cleanup structure.

3. Final Answer:

   Function that focuses and logs once, with destroy method -> Option B

4. Quick Check:

   Focus and log once on mount = D [OK]

Hint: Focus and log immediately, return destroy() for cleanup [OK]

Common Mistakes:

• Adding unnecessary event listeners for logging
• Missing return object with destroy method
• Logging multiple times on updates