Store contract (subscribe method) in Svelte - Performance & Optimization

Performance: Store contract (subscribe method)

MEDIUM IMPACT

This affects how efficiently components update when store data changes, impacting interaction responsiveness and rendering speed.

Reacting to store changes in a Svelte component

Svelte

let previous;
const unsubscribe = store.subscribe(value => {
  if (value !== previous) {
    previous = value;
    efficientUpdate(value);
  }
});

Avoids unnecessary updates by checking if the value changed before running expensive code, reducing wasted work.

📈 Performance Gainreduces reflows to only when data changes, improving INP by 30-50%

Reacting to store changes in a Svelte component

Svelte

const unsubscribe = store.subscribe(value => {
  // heavy computation or DOM updates here
  expensiveUpdate(value);
});

Triggers expensive updates on every store change, even if the value is unchanged or irrelevant, causing slow responsiveness.

📉 Performance Costtriggers multiple reflows and repaints per update, blocking interaction for 50+ ms on complex updates

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Subscribe triggers update on every change	Many DOM updates	Multiple reflows per update	High paint cost	[X] Bad
Subscribe updates only on real data change	Minimal DOM updates	Single reflow per real change	Low paint cost	[OK] Good

Rendering Pipeline

The subscribe method listens for store changes and triggers component updates. When called, it can cause style recalculation, layout, paint, and composite steps if the DOM changes.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages are most expensive when subscribe triggers frequent or unnecessary DOM updates.

Core Web Vital Affected

INP

This affects how efficiently components update when store data changes, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Avoid running expensive code on every subscribe callback without checking for changes.

2Unsubscribe when components unmount to prevent memory leaks.

3Batch or debounce updates if store changes rapidly to reduce reflows.

Performance Quiz - 3 Questions

What is the main performance risk when using the subscribe method without checks?

A Slower initial page load

B Memory leaks from not unsubscribing

C Unnecessary updates causing frequent reflows and repaints

D Increased bundle size

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for frequent layout and paint events triggered by store updates.

What to look for: High frequency of layout and paint events after store changes indicates inefficient subscribe usage.