What are Svelte actions (use:)?

Answer

Svelte actions are reusable behaviors applied to DOM elements with the use: directive. An action is a function that receives the DOM node and optional parameters. Example tooltip action: function tooltip(node, params) { const tip = createTooltip(params.text); node.addEventListener('mouseenter', showTip); node.addEventListener('mouseleave', hideTip); return { update(newParams) { tip.setText(newParams.text); }, destroy() { tip.remove(); node.removeEventListener('mouseenter', showTip); node.removeEventListener('mouseleave', hideTip); } }; }. Usage: <button use:tooltip={{ text: 'Click me' }}>. Actions replace React's imperative DOM manipulation patterns — instead of useRef + useEffect, define an action once and attach it declaratively. Common actions from the svelte-use library: click-outside detection, intersection observer, drag-and-drop, clipboard, media queries.