Writable stores in Svelte - Performance & Optimization

Performance: Writable stores

MEDIUM IMPACT

Writable stores affect how state changes propagate to the UI, impacting rendering speed and responsiveness.

Updating a writable store frequently inside a tight loop

Svelte

import { writable } from 'svelte/store';
const count = writable(0);

function updateCount() {
  let lastValue;
  for (let i = 0; i < 1000; i++) {
    lastValue = i;
  }
  count.set(lastValue);
}

Only one store update triggers a single re-render after the loop completes.

📈 Performance GainSingle re-render instead of 1000, greatly improving interaction responsiveness.

Updating a writable store frequently inside a tight loop

Svelte

import { writable } from 'svelte/store';
const count = writable(0);

function updateCount() {
  for (let i = 0; i < 1000; i++) {
    count.set(i);
  }
}

Each .set triggers a store update causing multiple re-renders and layout recalculations.

📉 Performance CostTriggers 1000 re-renders and layout recalculations, blocking UI responsiveness.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Frequent writable store.set calls	Multiple updates	Many reflows	High paint cost	[X] Bad
Single writable store.set after batch update	Single update	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Writable store updates notify subscribed components, triggering reactive updates that flow through style calculation, layout, paint, and composite stages.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages become expensive when many store updates cause frequent re-renders.

Core Web Vital Affected

INP

Writable stores affect how state changes propagate to the UI, impacting rendering speed and responsiveness.

Optimization Tips

1Avoid calling writable store.set repeatedly in quick succession.

2Batch multiple state changes into a single writable store update.

3Use writable stores only for state that truly needs to trigger UI updates.

Performance Quiz - 3 Questions

What is the main performance risk of calling writable store.set many times in a short period?

A It causes many re-renders and layout recalculations, slowing down the UI.

B It increases the bundle size significantly.

C It causes the browser to block network requests.

D It disables CSS animations.

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for frequent scripting and rendering tasks triggered by store updates.

What to look for: Multiple repeated layout and paint events indicate excessive store updates causing performance issues.