Custom store logic in Svelte - Performance & Optimization

Performance: Custom store logic

MEDIUM IMPACT

Custom store logic affects how reactive data updates propagate and how many DOM updates happen, impacting interaction responsiveness and rendering speed.

Creating a custom store that updates UI reactively

Svelte

import { writable } from 'svelte/store';

function createGoodStore() {
  const { subscribe, set, update } = writable(0);
  return {
    subscribe,
    increment: () => {
      // defer heavy computation outside update
      setTimeout(() => {
        update(n => n + 1);
      }, 0);
    }
  };
}

export const goodStore = createGoodStore();

Deferring heavy work avoids blocking the main thread during update, allowing smoother UI and faster interaction response.

📈 Performance GainNon-blocking updates reduce input delay, improving INP significantly.

Creating a custom store that updates UI reactively

Svelte

import { writable } from 'svelte/store';

function createBadStore() {
  const { subscribe, set, update } = writable(0);
  return {
    subscribe,
    increment: () => {
      update(n => {
        // heavy computation inside update
        for (let i = 0; i < 1000000; i++) {}
        return n + 1;
      });
    }
  };
}

export const badStore = createBadStore();

Heavy computation inside the update blocks the main thread and triggers multiple synchronous updates, causing slow UI responsiveness.

📉 Performance CostBlocks rendering for 50-100ms per update, causing input lag and poor INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous logic in store update	Multiple reactive DOM updates	Triggers multiple reflows	High paint cost due to blocking	[X] Bad
Lightweight async store update	Minimal reactive DOM updates	Single reflow per update	Low paint cost, smooth rendering	[OK] Good

Rendering Pipeline

Custom store updates trigger reactive subscriptions that cause DOM updates. Heavy synchronous logic in store updates delays Style Calculation and Layout, blocking Paint and Composite stages.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution blocking Layout and Paint

Core Web Vital Affected

INP

Custom store logic affects how reactive data updates propagate and how many DOM updates happen, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Avoid heavy synchronous work inside store update functions.

2Defer expensive computations outside reactive updates to keep UI smooth.

3Minimize the number of reactive subscriptions triggered per update.

Performance Quiz - 3 Questions

What is the main performance risk of heavy synchronous logic inside a Svelte custom store update?

A It blocks the main thread causing slow UI responsiveness

B It increases bundle size significantly

C It causes layout shifts (CLS)

D It delays initial page load (LCP)

DevTools: Performance

How to check: Record a performance profile while interacting with the UI that triggers store updates. Look for long tasks or scripting blocking main thread.

What to look for: Long scripting tasks causing delayed frames indicate blocking store logic. Short, quick tasks show efficient updates.