Action update and destroy in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when an action's update function changes the element's style?

Consider this Svelte action that updates the background color of an element when the parameter changes:

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

If this action is used on a <div> with initial color 'yellow' and later updated to 'lightblue', what will be the background color after update?

A The background color will be 'yellow' because update does not change it.

B The background color will be 'yellow' until the element is destroyed.

C The background color will be removed (empty) after update.

D The background color will be 'lightblue' as the update function sets it.

💡 Hint

Think about what the update function does when called with a new parameter.

The update function runs when the parameter changes. It sets the background color to the new value, so after update, the color is 'lightblue'.

❓ lifecycle

intermediate

When is the destroy function of a Svelte action called?

Given a Svelte action with a destroy method, when does Svelte call this method?

A When the element the action is attached to is removed from the DOM.

B Every time the action's parameter updates.

C When the component using the action is first created.

D When the browser window is resized.

💡 Hint

Think about cleanup tasks and when they should happen.

The destroy method is called when the element using the action is removed from the DOM, allowing cleanup like removing event listeners.

📝 Syntax

advanced

Which option correctly returns an action with update and destroy methods?

Choose the correct Svelte action syntax that includes both update and destroy methods.

A function action(node) { return { update() {}, destroy() {} } }

B function action(node) { update() {}, destroy() {} }

C function action(node) { return update() {}, destroy() {} }

D function action(node) { return { update() {}, destroy() } }

💡 Hint

Remember the action must return an object with methods.

Option A correctly returns an object with update and destroy methods. Other options have syntax errors or missing return.

🔧 Debug

advanced

Why does this Svelte action's update method not run on parameter change?

Look at this action:

function example(node, param) {
  console.log('init', param);
  return {
    update(newParam) {
      console.log('update', newParam);
    }
  };
}

When the parameter changes, the 'update' log never appears. What is the likely cause?

A The console.log inside update is incorrect syntax.

B The update method is missing a return statement.

C The action was not re-applied with the new parameter, so update is not called.

D Svelte actions do not support update methods.

💡 Hint

Think about how Svelte knows to call update.

The update method runs only if the action is used with a reactive parameter that changes. If the action is not re-applied with a new parameter, update won't run.

❓ state_output

expert

What is the final text content after action update and destroy?

Consider this Svelte action and usage:

function textAction(node, text) {
  node.textContent = text;
  return {
    update(newText) {
      node.textContent = newText;
    },
    destroy() {
      node.textContent = 'Removed';
    }
  };
}

// Usage in a component:
// <div use:textAction={message}></div>

// Initial message = 'Hello'
// Then message changes to 'World'
// Then the div is removed from DOM

What is the text content of the div at each stage?

A Initially empty, then 'Hello', then 'World' after removal.

B Initially 'Hello', then 'World', then 'Removed' after removal.

C Always 'Hello' regardless of updates or removal.

D Initially 'Hello', then 'World', then empty after removal.

💡 Hint

Remember what update and destroy do to the text content.

The action sets textContent to 'Hello' initially, updates it to 'World' when message changes, and sets it to 'Removed' when the element is removed.