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.