Event handler invoked instead of passed
Part of Code Quality & Syntax, which counts for 20% of the overall score. When this check fires it deducts 8 points from that category, once per scan, no matter how many places it turns up.
What it detects
Writing on:click={handler()} calls the function once while the element renders and binds its return value as the handler, so the click does nothing and any render-time side effect fires immediately. Pass the reference (on:click={handler}) or wrap it (on:click={() => handler()}).
Why it matters
In Svelte, on:click={handler} passes the function as the handler, while on:click={handler()} calls it immediately during render and uses the return value as the handler. The click then does nothing, and any work inside the function runs once at render time instead of on click, which commonly triggers an unexpected state update or fetch as the component mounts.
How to fix it
Pass the reference: on:click={handler}. If you need to pass arguments, wrap it in an arrow: on:click={() => handler(id)}. Only write on:click={makeHandler()} when makeHandler deliberately returns a function, and even then it is clearer to assign that function to a variable first.
The paid report includes a ready-to-paste prompt for your AI coding agent for every check it finds, pointed at the exact findings from your scan. See pricing
Does your repo trip this check?
Paste a GitHub URL or drop a project folder. Scans run in your browser and take seconds.
Scan your repo