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.

Practice

1. Why do Svelte stores help manage shared state in an app?

easy

A. They store data only for one component at a time.

B. They make the app run faster by skipping updates.

C. They keep data in one place and update all parts automatically.

D. They prevent any data changes after initialization.

Solution

1. Step 1: Understand the role of stores

   Svelte stores hold shared data centrally so multiple components can access it easily.

2. Step 2: Recognize automatic updates

   When the store data changes, all components using it update automatically, keeping UI in sync.

3. Final Answer:

   They keep data in one place and update all parts automatically. -> Option C

4. Quick Check:

   Shared data + auto update = A [OK]

Hint: Stores centralize data and auto-update components [OK]

Common Mistakes:

• Thinking stores only speed up the app
• Believing stores hold data per component only
• Assuming stores freeze data after setup

2. Which of the following is the correct way to import and create a writable store in Svelte?

easy

A. import writable from 'svelte'; const count = writable(0);

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

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

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

Solution

1. Step 1: Check import syntax

   The writable store is imported from 'svelte/store' using curly braces around writable.

2. Step 2: Verify store creation

   Creating a writable store uses writable(initialValue), so writable(0) is correct.

3. Final Answer:

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

4. Quick Check:

   Correct import + writable() = B [OK]

Hint: Use curly braces to import writable from 'svelte/store' [OK]

Common Mistakes:

• Importing writable without braces
• Using 'store' instead of 'writable'
• Calling store() instead of writable()

3. Given this Svelte store code, what will be logged to the console?

import { writable } from 'svelte/store';
const count = writable(0);
count.subscribe(value => console.log(value));
count.set(5);
count.update(n => n + 1);

medium

A. 0, 5, 6

B. 5, 6

C. 0, 1, 6

D. 0, 5, 5

Solution

1. Step 1: Understand subscription initial call

   Subscribing to a writable store immediately calls the callback with the current value, so 0 is logged first.

2. Step 2: Follow set and update calls

   count.set(5) changes value to 5, logging 5. Then count.update(n => n + 1) adds 1, logging 6.

3. Final Answer:

   0, 5, 6 -> Option A

4. Quick Check:

   Subscribe logs initial + set + update values = A [OK]

Hint: Subscribe logs current value immediately, then on changes [OK]

Common Mistakes:

• Ignoring initial subscription call
• Thinking update replaces value instead of adding
• Missing the last logged value

4. What is wrong with this Svelte store usage?

import { writable } from 'svelte/store';
const user = writable({ name: 'Alice' });

// In component
user.name = 'Bob';

medium

A. The store must be declared with let, not const.

B. Directly changing user.name does not update the store value.

C. Writable stores cannot hold objects as values.

D. The store should be imported from 'svelte' not 'svelte/store'.

Solution

1. Step 1: Identify how to update store values

   Writable stores require using set() or update() to change their value, not direct property assignment.

2. Step 2: Explain why direct property change fails

   Changing user.name directly modifies the object but does not notify the store, so subscribers won't update.

3. Final Answer:

   Directly changing user.name does not update the store value. -> Option B

4. Quick Check:

   Use set() or update() to change store values [OK]

Hint: Always use set() or update() to change store data [OK]

Common Mistakes:

• Trying to mutate store value properties directly
• Importing writable incorrectly
• Thinking const prevents store updates

5. You want to share a counter value across multiple components and update it from any of them. Which approach best uses Svelte stores to achieve this?

hard

A. Create a writable store in a separate file and import it in all components.

B. Pass the counter value as a prop from parent to child components only.

C. Use local variables in each component and sync them manually.

D. Create a store inside each component separately.

Solution

1. Step 1: Understand shared state needs

   To share and update data across components, a single source of truth is needed.

2. Step 2: Evaluate store usage

   Creating a writable store in one file and importing it everywhere ensures all components share and react to the same data.

3. Step 3: Compare other options

   Passing props only works top-down and is cumbersome for many components; local variables are isolated; separate stores cause desync.

4. Final Answer:

   Create a writable store in a separate file and import it in all components. -> Option A

5. Quick Check:

   Single shared store file = C [OK]

Hint: Use one store file imported by all components [OK]

Common Mistakes:

• Trying to sync local variables manually
• Passing props for deeply nested sharing
• Creating multiple stores causing inconsistent state