Explain Svelte Action update and provide a reactive CSS example
Tests Svelte actions beyond initial mount. Strong answers explain update re-runs when parameters change, give a CSS custom properties example, and contrast with destroy. Red flag: suggesting the action re-runs from scratch or using reactive statements.
What's really being asked
Whether you understand that a Svelte action is a long-lived lifecycle attachment to a DOM node, not a render-time function. The interviewer wants to see if you know the difference between one-time setup, reactive updates, and teardown, and whether you can implement all three phases correctly without relying on component-level reactivity.
The full answer
Four things in order. First, the action function itself runs only once when the element is mounted. Second, the update method on the returned ActionReturn object is called immediately after Svelte applies updates to the markup whenever the parameter changes, so you can react to new data without destroying and recreating the node. Third, the destroy method is called when the element is unmounted and should remove event listeners, observers, or timers. Fourth, a concrete example showing node.style.setProperty or similar direct DOM manipulation inside update.
The mistakes people make
Saying the entire action function re-runs whenever the parameter changes. Trying to use Svelte 5 runes like derived or effect inside the action body to watch parameters, which is an anti-pattern because actions are meant to be imperative DOM utilities outside the component reactivity graph. Returning a new object from update instead of mutating the existing closure state. Forgetting to clean up in destroy after setting global listeners or ResizeObservers.
What usually comes next
How would you type this action using the Action and ActionReturn interfaces from svelte/action? What happens if the parameter changes rapidly, and how would you debounce inside update? How do actions differ from attachments or from bind directives? Can an action return additional custom events or attributes, and how does that affect TypeScript typings?
A concrete example
A theme action that receives an object of CSS custom properties. On mount, it writes each property to the node with node.style.setProperty. In update, it receives the new theme object, removes old properties with node.style.removeProperty, then writes the new ones. In destroy, it removes all properties so no inline styles leak after unmount. The component usage looks like use:theme={{primary: color1, spacing: gap}} and when color1 changes, update swaps the CSS variable without remounting the element.
Interview question
Which approach correctly implements a Svelte action that keeps CSS custom properties on a node in sync with a reactive parameter object?
- a.Re-run the action on each change by calling it from a reactive statement in the component
- b.Return an update method that swaps properties via node.style.removeProperty and node.style.setProperty, plus a destroy method that clears themCorrect
- c.Apply styles once during mount, because Svelte automatically re-invokes the action when the passed arguments change
- d.Use $derived or $effect inside the action to track parameter changes and mutate the node's style
Why? this is the answer
A Svelte action attaches once on mount and uses the returned update method to react to new parameters without destroying the node, while destroy handles teardown. Option A is wrong because trying to re-run the action from a reactive statement breaks its long-lived lifecycle and remounts the attachment instead of updating it.
Just read this? Test yourself on what you have been reading.
Read the original → svelte.dev
- #svelte
- #actions
- #dom
- #lifecycle
- #advanced
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on svelte — each one lists the topics its interview covers.
See open roles