Named actions in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a named action updates its parameter?

Consider a Svelte component using a named action with a parameter. What is the behavior when the parameter changes?

Svelte

<script>
  let color = 'red';
  function highlight(node, params) {
    node.style.backgroundColor = params.color;
    return {
      update(newParams) {
        node.style.backgroundColor = newParams.color;
      },
      destroy() {
        node.style.backgroundColor = null;
      }
    };
  }
</script>

<button use:highlight={{ color }} on:click={() => color = color === 'red' ? 'blue' : 'red'}>Toggle Color</button>

A The button's background color stays red and never changes.

B The button's background color toggles between red and blue each time it is clicked.

C The button's background color changes to blue once and then stops updating.

D The button's background color flickers rapidly between red and blue.

💡 Hint

Think about what the update method inside the action does when parameters change.

The named action's update method runs whenever the parameter changes. It updates the node's background color accordingly, so clicking toggles the color between red and blue.

📝 Syntax

intermediate

Which option correctly defines a named action with a destroy method?

Identify the correct syntax for a named action that cleans up by removing an event listener when destroyed.

A

}
;}  
}    
;)kcilCeldnah ,'kcilc'(renetsiLtnevEevomer.tnemucod      
{ )(yortsed    
{ nruter  
;)kcilCeldnah ,'kcilc'(renetsiLtnevEdda.tnemucod  
;}  
}    
;))'kcilctuo'(tnevEmotsuC wen(tnevEhctapsid.edon      
{ ))tegrat.tneve(sniatnoc.edon!( fi    
{ >= tneve = kcilCeldnah tsnoc  
{ )edon(edistuOkcilc noitcnuf

B

function clickOutside(node) {
  const handleClick = event => {
    if (!node.contains(event.target)) {
      node.dispatchEvent(new CustomEvent('outclick'));
    }
  };
  document.addEventListener('click', handleClick);
  return {
    destroy() {
      document.removeEventListener('click');
    }
  };
}

C

function clickOutside(node) {
  const handleClick = event => {
    if (!node.contains(event.target)) {
      node.dispatchEvent(new CustomEvent('outclick'));
    }
  };
  document.addEventListener('click', handleClick);
  return {
    destroy() {
      document.removeEventListener('click', handleClick);
    }
  };
}

D

unction clickOutside(node) {
  const handleClick = event => {
    if (!node.contains(event.target)) {
      node.dispatchEvent(new CustomEvent('outclick'));
    }
  };
  document.addEventListener('click', handleClick);
  return {
    destroy() {
      document.removeEventListener('click', handleClick);
    }
  };
}

💡 Hint

Check the syntax of the destroy method and the parameters passed to removeEventListener.

Option C correctly defines the destroy method with parentheses and removes the exact event listener by passing both the event type and handler function.

🔧 Debug

advanced

Why does this named action not update when parameters change?

Given the following named action, why does the background color not update when the parameter changes?

Svelte

function highlight(node, params) {
  node.style.backgroundColor = params.color;
  return {
    destroy() {
      node.style.backgroundColor = null;
    }
  };
}

// Used as: <div use:highlight={{ color }}></div>

A Because the action does not implement an <code>update</code> method to handle parameter changes.

B Because the <code>destroy</code> method resets the color immediately after setting it.

C Because the parameter object is immutable and cannot trigger updates.

D Because the node style cannot be changed inside named actions.

💡 Hint

Think about how Svelte named actions handle parameter changes.

Named actions must provide an update method to react to parameter changes. Without it, the action only runs once on mount.

❓ state_output

advanced

What is the final text content after toggling the named action parameter twice?

Consider this Svelte component using a named action that updates text content based on a parameter. What is the final text shown after clicking the button twice?

Svelte

<script>
  let label = 'Hello';
  function updateText(node, params) {
    node.textContent = params.text;
    return {
      update(newParams) {
        node.textContent = newParams.text;
      }
    };
  }
</script>

<button use:updateText={{ text: label }} on:click={() => label = label === 'Hello' ? 'World' : 'Hello'}>Toggle</button>

A An empty string

B World

C HelloWorld

D Hello

💡 Hint

Each click toggles the label. After two clicks, what is the label value?

The label toggles: 'Hello' → 'World' → 'Hello'. After two clicks, the text content is 'Hello'.

🧠 Conceptual

expert

Which statement best describes the lifecycle of a named action in Svelte?

Choose the statement that correctly explains the lifecycle methods and their order in a Svelte named action.

A The action runs once on mount, then <code>update</code> runs on parameter changes, and finally <code>destroy</code> runs on unmount.

B The action runs <code>update</code> first, then <code>destroy</code>, and finally the main function on mount.

C The action runs <code>destroy</code> only if parameters change, otherwise it never runs.

D The action runs <code>destroy</code> on mount, then <code>update</code> on unmount, and the main function never runs.

💡 Hint

Recall the order of lifecycle methods: mount, update, destroy.

The named action function runs when the element mounts. The update method runs whenever parameters change. The destroy method runs when the element unmounts.

Practice

1. What is the main purpose of named actions in Svelte?

easy

A. To style elements with CSS

B. To define new components

C. To add reusable behavior to HTML elements

D. To manage application state

Solution

1. Step 1: Understand what named actions do

   Named actions in Svelte are used to add behavior to HTML elements that can be reused across components.

2. Step 2: Compare with other options

   Defining components, styling, and state management are handled differently in Svelte, not by named actions.

3. Final Answer:

   To add reusable behavior to HTML elements -> Option C

4. Quick Check:

   Named actions = reusable element behavior [OK]

Hint: Named actions add behavior to elements, not styles or state [OK]

Common Mistakes:

• Confusing actions with components
• Thinking actions handle styling
• Assuming actions manage state

2. Which of the following is the correct syntax to define a named action in Svelte?

easy

A. function myAction(node) { /* code */ }

B. const myAction = () => { /* code */ }

C. let myAction = node => { /* code */ }

D. action myAction(node) { /* code */ }

Solution

1. Step 1: Recall named action syntax

   Named actions are functions that receive the element node as the first argument, typically declared as function myAction(node) {}.

2. Step 2: Check other options

   Arrow functions can work but must return an object for cleanup; action myAction(node) { /* code */ } uses invalid syntax.

3. Final Answer:

   function myAction(node) { /* code */ } -> Option A

4. Quick Check:

   Named action = function with node parameter [OK]

Hint: Named actions are functions with node parameter, not keywords [OK]

Common Mistakes:

• Using invalid 'action' keyword
• Defining without node parameter
• Using arrow function without return object

3. Given this named action and usage:

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

<div use:highlight>Hello</div>

What happens when the component is removed from the page?

medium

A. The background color resets to default

B. The element is removed from the DOM immediately

C. An error occurs because destroy is missing

D. The background color stays yellow

Solution

1. Step 1: Understand the action's destroy method

   The destroy method resets the background color to empty string when the element is removed.

2. Step 2: Effect on component removal

   When the component unmounts, destroy runs, so the background color resets to default.

3. Final Answer:

   The background color resets to default -> Option A

4. Quick Check:

   destroy resets styles on removal [OK]

Hint: Destroy cleans up styles when element is removed [OK]

Common Mistakes:

• Assuming styles persist after removal
• Thinking destroy is optional
• Confusing destroy with element removal

4. What is wrong with this named action code?

function focus(node) {
  node.focus();
  return {
    destroy() {
      node.blur();
    }
  }
}

<input use:focus>

medium

A. Calling node.blur() in destroy may cause errors if node is removed

B. The action should not call node.focus() immediately

C. The action does not return an object

D. The action must be async to work properly

Solution

1. Step 1: Analyze the focus call timing

   Calling node.focus() immediately may not work reliably because the element might not be fully rendered, visible, or ready (e.g., during CSS transitions or animations).

2. Step 2: Best practice for focus actions

   In Svelte, it's often necessary to delay the focus call using tick(), requestAnimationFrame, or setTimeout(..., 0) to ensure DOM readiness.

3. Final Answer:

   The action should not call node.focus() immediately -> Option B

4. Quick Check:

   Delay focus with tick() or RAF [OK]

Hint: Delay node.focus() with tick() for reliability [OK]

Common Mistakes:

• Calling focus immediately without delay
• Ignoring DOM/transition timing issues
• Assuming focus always succeeds synchronously

5. You want to create a named action that changes an element's text color based on a parameter and updates it when the parameter changes. Which approach is correct?

hard

A. Use a reactive statement inside the action function to watch parameters

B. Set the color once in the action and ignore parameter changes

C. Recreate the action every time parameters change instead of updating

D. Return an update function from the action that sets the color when parameters change

Solution

1. Step 1: Understand parameter updates in named actions

   Named actions can return an update function to handle parameter changes dynamically.

2. Step 2: Evaluate options for handling parameter changes

   Setting color once ignores updates; reactive statements inside action function don't track parameters; recreating action is inefficient.

3. Final Answer:

   Return an update function from the action that sets the color when parameters change -> Option D

4. Quick Check:

   Use update() to handle parameter changes [OK]

Hint: Use update() function to react to parameter changes [OK]

Common Mistakes:

• Ignoring parameter updates
• Misusing reactive statements inside actions
• Recreating actions unnecessarily