Why lifecycle hooks run code at key moments in Svelte - Performance Evidence

Performance: Why lifecycle hooks run code at key moments

MEDIUM IMPACT

This affects how efficiently code runs during component creation, update, and destruction, impacting interaction responsiveness and visual stability.

Running code only when the component is ready or about to be removed

Svelte

import { onMount, onDestroy } from 'svelte';

onMount(() => {
  expensiveCalculation();
});

onDestroy(() => {
  cleanupResources();
});

function expensiveCalculation() {
  // heavy logic
}

function cleanupResources() {
  // cleanup logic
}

Runs heavy code only once when component mounts and cleans up on destroy, avoiding repeated costly runs.

📈 Performance Gainsingle execution on mount, no repeated blocking, improves INP significantly

Running code only when the component is ready or about to be removed

Svelte

import { onMount } from 'svelte';

// Running heavy code repeatedly inside reactive statements instead of lifecycle hooks
$: {
  expensiveCalculation();
}

function expensiveCalculation() {
  // heavy logic
}

Running heavy code reactively causes it to run on every state change, leading to slow interaction and janky UI.

📉 Performance Costblocks rendering for 50+ ms on each state update, causing poor INP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy code in reactive statements	Multiple per state change	Multiple reflows per update	High paint cost due to frequent layout changes	[X] Bad
Heavy code in onMount/onDestroy hooks	Single or few operations	Single reflow on mount/destroy	Low paint cost, stable layout	[OK] Good

Rendering Pipeline

Lifecycle hooks run code at specific moments: before the component appears, after it appears, or before it disappears. This timing controls when the browser must recalculate layout or repaint.

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckJavaScript Execution when heavy code runs repeatedly

Core Web Vital Affected

INP

This affects how efficiently code runs during component creation, update, and destruction, impacting interaction responsiveness and visual stability.

Optimization Tips

1Run heavy or setup code inside onMount to avoid repeated execution.

2Use onDestroy to clean up resources once when the component is removed.

3Avoid putting expensive logic inside reactive statements that run on every state change.

Performance Quiz - 3 Questions

Why is it better to run heavy code inside onMount instead of reactive statements in Svelte?

A Because onMount runs code before the component is created.

B Because reactive statements never run after the component mounts.

C Because onMount runs code only once when the component appears, avoiding repeated work.

D Because reactive statements run only once on destroy.

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for long tasks or repeated JavaScript execution during state changes.

What to look for: Check if heavy JavaScript runs repeatedly on updates (bad) or only once on mount/destroy (good). Look for reduced scripting time and smoother interaction.