Svelte 3/4: Dynamic event handler function can be falsely deferred.

[brunnerh]

Describe the bug

To account for event handlers changing at runtime, handlers that come from props or variables that are reassigned are not used directly as event handlers. Instead, their invocation is wrapped in a new function, which can be wrong if a function call is used to get the handler. See:

• feat dynamic event handler #3836 (comment)

(Not sure if something can/should be done about this at this point, it primarily would be good, if the problem is not re-introduced in Svelte 5.)

Reproduction

<script>
	let makeHandler = null; // could also come from a prop
	makeHandler = () => {
		console.log('Creating handler');
		return () => alert('hello');
	};
</script>

<button on:click={makeHandler()}>Click</button>

REPL

"Creating handler" should only be logged once, but the function is executed on every click.

Logs

No response

System Info

REPL

Severity

annoyance