Reactive blocks for side effects in Svelte - Performance & Optimization

Performance: Reactive blocks for side effects

MEDIUM IMPACT

This affects how efficiently the browser updates the UI and runs side effects when reactive data changes.

Running side effects when reactive data changes

Svelte

let count = 0;

$: if (count !== 0) {
  console.log('Count changed:', count);
  // side effect runs only when count changes and meets condition
}

The reactive block runs conditionally, reducing unnecessary executions and improving responsiveness.

📈 Performance GainReduces side effect runs by filtering, improving INP and reducing main thread blocking.

Running side effects when reactive data changes

Svelte

let count = 0;

$: {
  console.log('Count changed:', count);
  // heavy side effect here
}

This reactive block runs on every change of any reactive dependency inside, potentially causing unnecessary side effects and blocking rendering.

📉 Performance CostTriggers multiple side effect executions and can block rendering for tens of milliseconds if side effects are heavy.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Unconditional reactive block with heavy side effects	Multiple DOM updates if side effects modify DOM	Multiple reflows if layout changes	High paint cost due to frequent updates	[X] Bad
Conditional reactive block limiting side effects	Minimal DOM updates only when needed	Single or no reflows if no layout changes	Low paint cost due to fewer updates	[OK] Good

Rendering Pipeline

Reactive blocks trigger JavaScript code execution when reactive dependencies change, which can cause style recalculations and layout if DOM updates happen inside. Efficient reactive blocks minimize unnecessary executions and DOM changes.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution and Layout when side effects cause DOM changes

Core Web Vital Affected

INP

This affects how efficiently the browser updates the UI and runs side effects when reactive data changes.

Optimization Tips

1Run side effects in reactive blocks only when necessary using conditions.

2Avoid heavy computations or DOM changes inside reactive blocks without filtering.

3Use DevTools Performance panel to identify and optimize costly reactive block executions.

Performance Quiz - 3 Questions

What is the main performance risk of running side effects in reactive blocks without conditions?

A The browser caches the side effects, so performance is not affected.

B Side effects only run once, so no performance risk exists.

C Side effects run too often, blocking the main thread and causing slow input response.

D Reactive blocks automatically batch side effects, so no extra cost.

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for long tasks caused by reactive block executions and check if they coincide with unnecessary side effect runs.

What to look for: Look for frequent scripting time spikes and layout shifts caused by reactive blocks running too often.