Why stores manage shared state in Svelte - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when multiple components subscribe to the same Svelte store?

Consider a Svelte store shared by two components. When the store value changes, what is the expected behavior?

Svelte

import { writable } from 'svelte/store';

const count = writable(0);

// Component A and Component B both subscribe to 'count'
// When count.set(5) is called, what happens?

A Only the component that called count.set(5) updates; the other stays the same.

B Both components update their displayed value to 5 automatically.

C Neither component updates until the page is refreshed.

D Components update only if they manually call count.subscribe() again.

💡 Hint

Think about how reactive subscriptions work in Svelte stores.

Svelte stores notify all subscribers immediately when their value changes. This means all components using the store update automatically.

🧠 Conceptual

intermediate

Why use a store for shared state instead of component props?

Why is a Svelte store preferred for managing state shared across many components instead of passing props down multiple levels?

A Props automatically sync data between components without extra code.

B Props are faster and more efficient for sharing state across many components.

C Stores allow direct access to shared data without prop drilling, making code cleaner and easier to maintain.

D Stores require components to reload to see updated data, unlike props.

💡 Hint

Think about how data flows in component trees and how stores simplify that.

Stores provide a centralized place for shared state, avoiding the need to pass props through many layers, which can get complicated and error-prone.

📝 Syntax

advanced

Which Svelte store syntax correctly creates a readable store with a custom start function?

Choose the correct syntax to create a readable store that starts a timer and updates every second.

A

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

B

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

C

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

D

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

💡 Hint

Remember the readable store's start function must return a cleanup function.

Option D correctly uses readable with a start function that sets an interval and returns a cleanup function to clear it. Option D uses writable incorrectly. Options A and D miss returning the cleanup function.

🔧 Debug

advanced

Why does this Svelte store subscription not update the component?

Given this code, why does the component not update when the store changes?

Svelte

import { writable } from 'svelte/store';
const count = writable(0);

// In component:
let value;
count.subscribe(val => {
  value = val;
});

// count.set(1) is called elsewhere

A The component does not react because 'value' is not a reactive variable; it needs '$value' or '$count' syntax.

B The subscription callback is never called because count.set(1) is invalid.

C The component updates only if 'value' is declared with 'const' instead of 'let'.

D The store must be imported as 'readable' to update the component.

💡 Hint

Think about how Svelte tracks reactive variables and updates the UI.

Directly assigning to a normal variable inside subscribe does not trigger Svelte's reactivity. Using the '$' prefix with the store or reactive declarations is needed for automatic updates.

❓ state_output

expert

What is the final output after these Svelte store updates?

Given the following Svelte store and component code, what is the final value displayed?

Svelte

import { writable } from 'svelte/store';

const store = writable(0);

store.update(n => n + 1);
store.set(5);
store.update(n => n * 2);

let value;
store.subscribe(v => value = v);

// What is the value of 'value' after these operations?

A 10

B 6

C 1

D 5

💡 Hint

Trace each store operation step by step.

Starting at 0, update adds 1 → 1, set to 5 → 5, update multiplies by 2 → 10. The final subscribed value is 10.