Why actions add reusable element behavior in Svelte - Quick Recap

Recall & Review

beginner

What is a Svelte action?

A Svelte action is a function that can be applied to an HTML element to add reusable behavior or logic directly to that element.

beginner

How do actions help with code reuse in Svelte?

Actions let you write behavior once and apply it to many elements, avoiding repeated code and making your app easier to maintain.

intermediate

What parameters does a Svelte action receive?

A Svelte action receives the HTML element it is applied to and optionally a parameter to customize its behavior.

intermediate

How does Svelte clean up actions when elements are removed?

If an action returns a function, Svelte calls it to clean up resources or event listeners when the element is removed from the DOM.

intermediate

Why is using actions better than inline event handlers for reusable behavior?

Actions separate behavior from markup, making code cleaner, easier to reuse, and easier to test compared to inline event handlers.

What does a Svelte action primarily add to an element?

A New HTML tags

B Reusable behavior or logic

C Styling and CSS classes

D Server-side rendering

Svelte actions add reusable behavior or logic to elements, not styling or HTML structure.

What argument does a Svelte action receive first?

A The event object

B The component's state

C The HTML element it is applied to

D The CSS styles

The first argument to a Svelte action is always the HTML element it is attached to.

How can a Svelte action clean up when an element is removed?

A By returning a cleanup function

B By calling a global reset method

C By removing the element manually

D By reloading the page

Returning a cleanup function from an action lets Svelte call it when the element is removed.

Why use actions instead of inline event handlers for repeated behavior?

A Actions keep code cleaner and reusable

B Inline handlers are faster

C Actions add more HTML elements

D Inline handlers support parameters better

Actions help keep code clean and reusable, unlike inline handlers which duplicate code.

Can Svelte actions accept parameters to customize behavior?

A No, parameters are not supported

B No, they only get the element

C Yes, but only as global variables

D Yes, as a second argument

Svelte actions can accept a second argument to customize their behavior.

Explain how Svelte actions help add reusable behavior to elements.

Think about how you can write one function and use it on many elements.

Describe the lifecycle of a Svelte action from applying to cleanup.

Consider what happens when the element appears and disappears.