Readable stores in Svelte - Performance & Optimization

Performance: Readable stores

MEDIUM IMPACT

Readable stores affect how reactive data updates propagate to the UI, impacting interaction responsiveness and rendering efficiency.

Sharing reactive data without unnecessary re-renders

Svelte

import { readable } from 'svelte/store';

const store = readable(0, set => {
  let value = 0;
  const interval = setInterval(() => {
    const newValue = computeValue();
    if (newValue !== value) {
      value = newValue;
      set(value);
    }
  }, 1000);
  return () => clearInterval(interval);
});

Readable store only calls set when the value changes, preventing unnecessary subscriber updates and re-renders.

📈 Performance GainReduces reflows and repaints by avoiding redundant updates, improving INP and CPU efficiency.

Sharing reactive data without unnecessary re-renders

Svelte

import { writable } from 'svelte/store';

const store = writable(0);

// Components subscribe directly and update frequently even if data is unchanged
store.set(0); // triggers update even if value is same

Writable stores notify all subscribers on every set call, even if the value hasn't changed, causing unnecessary re-renders.

📉 Performance CostTriggers multiple reflows and repaints per redundant update, increasing INP and CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Writable store with frequent redundant updates	High (many subscriber callbacks)	Multiple per update	High due to repeated repaints	[X] Bad
Readable store with conditional updates	Low (only on value change)	Single or minimal	Low due to fewer repaints	[OK] Good

Rendering Pipeline

Readable stores control when reactive updates propagate to components. When the store's set function is called, it triggers subscriber callbacks, which cause style recalculations, layout, and paint if the DOM changes.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages due to unnecessary DOM updates from redundant store notifications.

Core Web Vital Affected

INP

Readable stores affect how reactive data updates propagate to the UI, impacting interaction responsiveness and rendering efficiency.

Optimization Tips

1Only call set in readable stores when the value actually changes.

2Avoid redundant updates to reduce layout thrashing and repaint cost.

3Use readable stores to improve interaction responsiveness (INP).

Performance Quiz - 3 Questions

What is the main performance benefit of using a readable store over a writable store in Svelte?

A It reduces the initial bundle size by removing writable store code.

B It prevents unnecessary subscriber updates by only notifying on value changes.

C It automatically batches DOM updates for faster rendering.

D It delays updates to reduce CPU usage.

DevTools: Performance

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

What to look for: Check if updates cause multiple reflows and repaints unnecessarily. Efficient readable stores show fewer layout and paint events.