Readable stores in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Svelte component display?

Consider this Svelte component using a readable store:

import { readable } from 'svelte/store';

const time = readable(new Date(), function start(set) {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return () => clearInterval(interval);
});

<script>
  import { time } from './timeStore';
</script>

<p>Current time: {$time.toLocaleTimeString()}</p>

What will the component display?

Svelte

import { readable } from 'svelte/store';

const time = readable(new Date(), function start(set) {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return () => clearInterval(interval);
});

<script>
  import { time } from './timeStore';
</script>

<p>Current time: {$time.toLocaleTimeString()}</p>

A The current time updates every second, showing the live clock.

B The time updates only once after 1 second and then stops.

C The component throws an error because readable stores cannot be used in markup.

D The time is fixed at the moment the component loads and never updates.

💡 Hint

Think about what the setInterval inside the readable store does.

The readable store sets up an interval that updates the time every second by calling set(new Date()). This causes the component to re-render with the updated time every second.

❓ state_output

intermediate

What is the value of the store after 3 seconds?

Given this readable store in Svelte:

import { readable } from 'svelte/store';

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

  return () => clearInterval(interval);
});

What will be the value of $count after 3 seconds?

Svelte

import { readable } from 'svelte/store';

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

  return () => clearInterval(interval);
});

A 0

B 3

C 1

D undefined

💡 Hint

Count how many times the interval callback runs in 3 seconds.

The interval runs every 1000ms (1 second), incrementing i and setting the store. After 3 seconds, it runs 3 times, so the store value is 3.

📝 Syntax

advanced

Which option correctly creates a readable store with cleanup?

Which of the following code snippets correctly creates a readable store that updates every second and cleans up properly?

A

const timer = readable(0, (set) => {
  setInterval(() => set(Date.now()), 1000);
  return clearInterval;
});

B

const timer = readable(0, () => {
  setInterval(() => set(Date.now()), 1000);
});

C

const timer = readable(0, (set) => {
  const id = setInterval(() => set(Date.now()), 1000);
  clearInterval(id);
});

D

const timer = readable(0, set => {
  const id = setInterval(() => set(Date.now()), 1000);
  return () => clearInterval(id);
});

💡 Hint

Remember the cleanup function must be returned and clear the interval.

Option D correctly sets up an interval and returns a cleanup function that clears it. Option D never clears the interval. Option D clears the interval immediately, so no updates happen. Option D returns the clearInterval function itself without calling it with the interval id.

🔧 Debug

advanced

Why does this readable store not update the component?

Look at this Svelte readable store and component:

const data = readable('initial', (set) => {
  fetch('/api/data')
    .then(response => response.json())
    .then(json => {
      set(json.value);
    });
});

<script>
  import { data } from './dataStore';
</script>

<p>Data: {$data}</p>

The component always shows 'initial' and never updates. Why?

Svelte

const data = readable('initial', (set) => {
  fetch('/api/data')
    .then(response => response.json())
    .then(json => {
      set(json.value);
    });
});

<script>
  import { data } from './dataStore';
</script>

<p>Data: {$data}</p>

A The readable store must call set synchronously, async calls are not allowed.

B The fetch call is incorrect and never resolves, so set is never called.

C The fetch promise runs but the store subscriber is never activated, so set has no effect.

D The component does not subscribe to the store correctly, so it never updates.

💡 Hint

Think about when the start function in readable runs and when subscribers exist.

The start function in a readable store runs only when the first subscriber subscribes. If the store is imported but not subscribed to before fetch resolves, the set call happens before subscription, so the component never updates.

🧠 Conceptual

expert

How does a Svelte readable store differ from a writable store in usage?

Which statement best describes the difference between a readable store and a writable store in Svelte?

A A readable store allows only internal updates via its start function; a writable store allows external updates via its set and update methods.

B A readable store can be updated externally by calling set; a writable store cannot be updated after creation.

C A readable store requires manual subscription; a writable store automatically updates all components without subscription.

D A readable store is immutable and never changes; a writable store changes only once.

💡 Hint

Consider who can change the store's value after creation.

Readable stores expose only a subscribe method and update their value internally via the start function. Writable stores expose set and update methods allowing external code to change their value.

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