Component events (createEventDispatcher) in Svelte - Performance & Optimization

Performance: Component events (createEventDispatcher)

MEDIUM IMPACT

This affects interaction responsiveness and event propagation efficiency between components.

Communicating from child to parent component on user action

Svelte

import { createEventDispatcher } from 'svelte';

// Child.svelte
<script>
  const dispatch = createEventDispatcher();
  function handleClick() {
    dispatch('click');
  }
</script>
<button on:click={handleClick}>Click me</button>

Dispatching a custom event directly to the parent limits updates to only interested components.

📈 Performance GainSingle event dispatch with minimal re-rendering, improving interaction responsiveness (INP).

Communicating from child to parent component on user action

Svelte

import { writable } from 'svelte/store';

// Child.svelte
<script>
  import { sharedStore } from './store.js';
  function handleClick() {
    sharedStore.set('clicked');
  }
</script>
<button on:click={handleClick}>Click me</button>

Using a global store for simple child-to-parent communication causes unnecessary reactivity and updates across unrelated components.

📉 Performance CostTriggers multiple component updates and re-renders, increasing INP and CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using createEventDispatcher for child-to-parent events	Minimal, only event dispatch	0 unless handler changes layout	0 unless handler changes styles	[OK] Good
Using global store for simple events	Multiple components update	Multiple reflows if layout changes	Multiple paints if styles change	[X] Bad

Rendering Pipeline

When a component event is dispatched, the browser handles the event propagation without triggering layout recalculations or paints unless the event handler modifies the DOM or state.

→Event Handling

→JavaScript Execution

⚠️ BottleneckJavaScript Execution if event handlers perform heavy computations or cause state changes triggering reflows.

Core Web Vital Affected

INP

This affects interaction responsiveness and event propagation efficiency between components.

Optimization Tips

1Use createEventDispatcher for direct child-to-parent communication to minimize updates.

2Keep event handlers lightweight to avoid blocking JavaScript execution.

3Avoid global stores for simple event communication to reduce unnecessary re-renders.

Performance Quiz - 3 Questions

What is the main performance benefit of using createEventDispatcher in Svelte components?

A It limits updates to only components listening to the event.

B It automatically batches all DOM updates.

C It reduces the bundle size significantly.

D It prevents any JavaScript execution on event.

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for event dispatch duration and subsequent JS execution.

What to look for: Low JS execution time after event dispatch and minimal layout thrashing indicate good performance.