What is a Svelte Action? Write a simple logging action.

WHAT THIS TESTS: This question checks whether you know the difference between declarative template logic and imperative DOM manipulation in Svelte. An action is the escape hatch for when you need to touch the actual DOM node directly. The interviewer wants to see that you understand the use directive, the function signature, and the lifecycle timing. Specifically, they are looking for awareness that the action runs when the element is created and mounted, not during compilation or at the module level.

A GOOD ANSWER COVERS: A strong answer hits four things in order. First, state that an action is a plain function that receives the DOM element as its first argument. Second, explain that you attach it to an element in the template with the use directive, such as use:myAction. Third, show that the function body runs immediately when the node enters the DOM, which is the right place for side effects like logging or integrating non-Svelte libraries. Fourth, mention the optional return object that can contain an update method for reactive parameter changes and a destroy method for cleanup when the element is removed.

COMMON WRONG ANSWERS: Red flags include confusing actions with onMount or other component lifecycle hooks, since actions are element-level rather than component-level. Another mistake is treating the action like an event handler that returns a cleanup function directly instead of an object with a destroy key. Some candidates forget that the action receives the raw DOM node and try to return Svelte markup from it. Also, logging outside the function body or putting the action definition inside a reactive statement shows a misunderstanding of when the code executes.

LIKELY FOLLOW-UPS: The interviewer might ask how you would pass parameters to an action and how the update method differs from re-running the whole action. They could also ask when you would choose an action over a reactive effect in Svelte 5, or how to type an action with TypeScript using the Action interface from svelte/action. Another common follow-up is how you would handle cleanup for global event listeners or IntersectionObservers inside an action.

ONE CONCRETE EXAMPLE: You could write a simple action in a file called logger.js. The function is named logOnMount and takes node as its argument. Inside the function, you run console.log with the message Element mounted and the node itself. Then in a Svelte component, you import the action and apply it to a div element using the use:logOnMount directive. When the component renders, the browser console shows the message immediately after the div enters the DOM. If you want cleanup, you return an object with a destroy method that runs another console.log when the element is removed.

Source: svelte.dev