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.

Practice

1. What is the main purpose of a readable store in Svelte?

easy

A. To create a store that holds static, non-reactive data

B. To allow components to write and update the store value directly

C. To provide reactive data that cannot be changed from outside the store

D. To replace writable stores for all state management

Solution

1. Step 1: Understand readable store purpose

   A readable store provides reactive data but restricts external modifications.

2. Step 2: Compare with writable stores

   Writable stores allow external updates, readable stores do not.

3. Final Answer:

   To provide reactive data that cannot be changed from outside the store -> Option C

4. Quick Check:

   Readable store = read-only reactive data [OK]

Hint: Readable stores are read-only from outside [OK]

Common Mistakes:

• Confusing readable with writable stores
• Thinking readable stores allow external updates
• Assuming readable stores hold static data only

2. Which of the following is the correct way to create a readable store in Svelte that updates the current time every second?

easy

A. import { readable } from 'svelte/store'; const time = readable(new Date(), set => { const interval = setInterval(() => set(new Date()), 1000); return () => clearInterval(interval); });

B. import { writable } from 'svelte/store'; const time = writable(new Date());

C. import { readable } from 'svelte/store'; const time = readable(new Date());

D. import { readable } from 'svelte/store'; const time = readable(() => new Date());

Solution

1. Step 1: Recall readable store syntax

   Readable stores take an initial value and a start function that sets updates and cleanup.

2. Step 2: Analyze options

   import { readable } from 'svelte/store'; const time = readable(new Date(), set => { const interval = setInterval(() => set(new Date()), 1000); return () => clearInterval(interval); }); correctly uses readable with a start function that updates time every second and cleans up.

3. Final Answer:

   import { readable } from 'svelte/store'; const time = readable(new Date(), set => { const interval = setInterval(() => set(new Date()), 1000); return () => clearInterval(interval); }); -> Option A

4. Quick Check:

   Readable store needs start function for updates [OK]

Hint: Readable stores need a start function for dynamic updates [OK]

Common Mistakes:

• Omitting the start function for dynamic data
• Using writable instead of readable
• Passing a function without calling set inside

3. Given this readable store code, what will be logged to the console after 3 seconds?

import { readable } from 'svelte/store';

const count = readable(0, set => {
  let n = 0;
  const interval = setInterval(() => {
    n += 1;
    set(n);
  }, 1000);
  return () => clearInterval(interval);
});

count.subscribe(value => console.log(value));

medium

A. Only 0

B. 1, 2, 3

C. 0, 1, 2

D. 0, 1, 2, 3

Solution

1. Step 1: Understand initial value and updates

   The readable store starts at 0 and increments n every second, calling set(n).

2. Step 2: Trace values over 3 seconds

   At start: 0 logged immediately. After 1s: 1, after 2s: 2, after 3s: 3 logged.

3. Final Answer:

   0, 1, 2, 3 -> Option D

4. Quick Check:

   Initial + increments each second = 0,1,2,3 [OK]

Hint: Readable emits initial value immediately on subscribe [OK]

Common Mistakes:

• Ignoring initial value emission
• Counting only increments without initial
• Assuming subscription logs only after first interval

4. What is wrong with this readable store code?

import { readable } from 'svelte/store';

const data = readable(0, set => {
  const interval = setInterval(() => {
    set(Date.now());
  }, 1000);
  // Missing cleanup function
});

medium

A. The store is missing an initial value

B. The start function does not return a cleanup function

C. You cannot use setInterval inside a readable store

D. The set function should not be called inside the start function

Solution

1. Step 1: Check readable store start function requirements

   The start function must return a cleanup function or undefined for cleanup.

2. Step 2: Analyze given code

   The code creates an interval that calls set every second but does not return any cleanup function.

3. Final Answer:

   The start function does not return a cleanup function -> Option B

4. Quick Check:

   Start function must return cleanup or undefined [OK]

Hint: Always return cleanup function or undefined in readable start [OK]

Common Mistakes:

• Ignoring cleanup function requirement
• Thinking setInterval is disallowed in stores
• Believing set cannot be called inside start

5. You want to create a readable store that emits the current window width and updates on resize. Which code snippet correctly implements this behavior?

hard

A. import { readable } from 'svelte/store';

const width = readable(window.innerWidth, set => {
const onResize = () => set(window.innerWidth);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
});

B. import { writable } from 'svelte/store';

const width = writable(window.innerWidth);
window.addEventListener('resize', () => width.set(window.innerWidth));

C. import { readable } from 'svelte/store';

const width = readable(() => window.innerWidth);

D. import { readable } from 'svelte/store';

const width = readable(window.innerWidth);
window.addEventListener('resize', () => width.set(window.innerWidth));

Solution

1. Step 1: Understand readable store with event listener

   Readable stores need a start function to set updates and cleanup listeners.

2. Step 2: Check options for correct event handling and cleanup

   import { readable } from 'svelte/store'; const width = readable(window.innerWidth, set => { const onResize = () => set(window.innerWidth); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }); adds resize listener, calls set on resize, and removes listener on cleanup.

3. Final Answer:

   import { readable } from 'svelte/store'; const width = readable(window.innerWidth, set => { const onResize = () => set(window.innerWidth); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }); -> Option A

4. Quick Check:

   Readable with event listener and cleanup = import { readable } from 'svelte/store'; const width = readable(window.innerWidth, set => { const onResize = () => set(window.innerWidth); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }); [OK]

Hint: Use readable with start function adding/removing event listeners [OK]

Common Mistakes:

• Using writable store when read-only is needed
• Not removing event listeners on cleanup
• Passing function instead of initial value to readable