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.