Action parameters in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when using an action with parameters in Svelte?

Consider this Svelte action that changes the background color of an element based on a parameter. What will be the background color of the

after mounting?

function colorAction(node, color) {
  node.style.backgroundColor = color;
  return {
    update(newColor) {
      node.style.backgroundColor = newColor;
    }
  };
}

<div use:colorAction={'red'}>Hello</div>

Svelte

function colorAction(node, color) {
  node.style.backgroundColor = color;
  return {
    update(newColor) {
      node.style.backgroundColor = newColor;
    }
  };
}

<div use:colorAction={'red'}>Hello</div>

A The div will have a background color of 'undefined'.

B The div will have no background color because the action parameter is ignored.

C The div will have a default background color set by the browser.

D The div will have a red background color.

💡 Hint

Remember that the action receives the parameter as the second argument and applies it immediately.

The action receives 'red' as the color parameter and sets the node's background color to red on mount.

❓ state_output

intermediate

How does updating action parameters affect the DOM in Svelte?

Given this Svelte action and component, what will be the background color of the

after the button is clicked?

function colorAction(node, color) {
  node.style.backgroundColor = color;
  return {
    update(newColor) {
      node.style.backgroundColor = newColor;
    }
  };
}

<script>
  let bg = 'blue';
</script>

<div use:colorAction={bg}>Color me</div>
<button on:click={() => bg = 'green'}>Change Color</button>

Svelte

function colorAction(node, color) {
  node.style.backgroundColor = color;
  return {
    update(newColor) {
      node.style.backgroundColor = newColor;
    }
  };
}

<script>
  let bg = 'blue';
</script>

<div use:colorAction={bg}>Color me</div>
<button on:click={() => bg = 'green'}>Change Color</button>

A The div's background color stays blue even after clicking the button.

B The div's background color changes from blue to green after clicking the button.

C The div's background color changes to red after clicking the button.

D The div's background color becomes transparent after clicking the button.

💡 Hint

Check how the action's update method reacts to parameter changes.

When the variable 'bg' changes, Svelte calls the action's update method with the new value, updating the background color.

📝 Syntax

advanced

Which option correctly defines a Svelte action with parameters and cleanup?

You want to create a Svelte action that logs a message when the element is mounted and removes the event listener on destroy. Which code snippet is correct?

A

function logAction(node, message) {
  console.log(message);
  const handler = () => console.log('clicked');
  node.addEventListener('click', handler);
  return {
    destroy() {
      node.removeEventListener('click', handler);
    }
  };
}

B

function logAction(node, message) {
  console.log(message);
  const handler = () => console.log('clicked');
  node.addEventListener('click', handler);
  return {
    update(newMessage) {
      console.log(newMessage);
    }
  };
}

C

function logAction(node, message) {
  console.log(message);
  node.addEventListener('click', () => console.log('clicked'));
  return {
    destroy() {
      node.removeEventListener('click');
    }
  };
}

D

function logAction(node, message) {
  console.log(message);
  node.addEventListener('click', () => console.log('clicked'));
  return {};
}

💡 Hint

Remember to keep a reference to the event handler to remove it later.

Option A correctly stores the handler function and removes it in destroy. Others either miss the handler reference or don't remove the listener properly.

🔧 Debug

advanced

Why does this Svelte action not update when parameters change?

Examine this Svelte action usage:

function borderAction(node, width) {
  node.style.border = width + 'px solid black';
}

<script>
  let borderWidth = 2;
</script>

<div use:borderAction={borderWidth}>Box</div>
<button on:click={() => borderWidth = 5}>Increase Border</button>

Why does the border not update when clicking the button?

Svelte

function borderAction(node, width) {
  node.style.border = width + 'px solid black';
}

<script>
  let borderWidth = 2;
</script>

<div use:borderAction={borderWidth}>Box</div>
<button on:click={() => borderWidth = 5}>Increase Border</button>

A The variable borderWidth is not reactive.

B The border style is invalid and ignored by the browser.

C The action lacks an update method to handle parameter changes.

D The action is not applied because of a syntax error.

💡 Hint

Check if the action handles changes to its parameters after initial mount.

Without an update method, the action only runs once on mount and ignores parameter changes.

🧠 Conceptual

expert

What happens if an action's update method returns a new destroy function in Svelte?

In Svelte, an action can return an object with update and destroy methods. What is the effect if the update method returns a new destroy function?

Consider:

function exampleAction(node, param) {
  const cleanup = () => console.log('cleanup old');
  node.style.color = param;
  return {
    update(newParam) {
      cleanup();
      node.style.color = newParam;
      return () => console.log('cleanup new');
    },
    destroy() {
      console.log('destroy called');
    }
  };
}

Svelte

function exampleAction(node, param) {
  const cleanup = () => console.log('cleanup old');
  node.style.color = param;
  return {
    update(newParam) {
      cleanup();
      node.style.color = newParam;
      return () => console.log('cleanup new');
    },
    destroy() {
      console.log('destroy called');
    }
  };
}

A The returned function from update replaces the previous destroy function and is called before the next update or destroy.

B The returned function from update is called immediately after update finishes.

C Svelte throws an error because update cannot return a function.

D The returned function from update is ignored; only the original destroy is called on unmount.

💡 Hint

Think about how Svelte manages cleanup between updates and unmount.

When update returns a function, Svelte treats it as a cleanup function replacing the previous one, calling it before the next update or destroy.