Writable stores in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ state_output

intermediate

What is the output of this writable store update?

Consider this Svelte writable store code. What will be the final value of count after the update?

Svelte

import { writable } from 'svelte/store';

const count = writable(0);

count.update(n => n + 5);
count.update(n => n * 2);

let finalValue;
count.subscribe(value => finalValue = value);

A 10

B 5

C 0

D 15

💡 Hint

Remember that each update uses the current store value as input.

The store starts at 0. First update adds 5, so value is 5. Second update multiplies by 2, so final value is 10.

❓ component_behavior

intermediate

How does this Svelte component react to writable store changes?

Given this Svelte component using a writable store, what will be displayed after clicking the button twice?

Svelte

<script>
  import { writable } from 'svelte/store';
  const clicks = writable(0);
  function increment() {
    clicks.update(n => n + 1);
  }
</script>

<button on:click={increment}>Click me</button>
<p>Clicks: {$clicks}</p>

A Clicks: 1

B Clicks: 0

C Clicks: 2

D Clicks: undefined

💡 Hint

The $ prefix subscribes to the store and updates the UI automatically.

Each click calls increment which adds 1 to the store. After two clicks, the value is 2 and displayed.

📝 Syntax

advanced

Which option correctly creates a writable store with a custom set method?

You want to create a writable store that logs every time its value changes. Which code snippet is correct?

A

import { writable } from 'svelte/store';

function loggerStore(initial) {
  const { subscribe, set, update } = writable(initial);
  return {
    subscribe,
    set(value) {
      console.log('Setting:', value);
      update(value);
    },
    update
  };
}

B

import { writable } from 'svelte/store';

function loggerStore(initial) {
  const { subscribe, set, update } = writable(initial);
  return {
    subscribe,
    set(value) {
      console.log('Setting:', value);
      return set(value);
    },
    update
  };
}

C

import { writable } from 'svelte/store';

function loggerStore(initial) {
  const { subscribe, set, update } = writable(initial);
  return {
    subscribe,
    set(value) {
      console.log('Setting:', value);
      this.set(value);
    },
    update
  };
}

D

import { writable } from 'svelte/store';

function loggerStore(initial) {
  const { subscribe, set, update } = writable(initial);
  return {
    subscribe,
    set: (value) => {
      console.log('Setting:', value);
      set(value);
    },
    update
  };
}

💡 Hint

The custom set method must call the original set function to update the store.

Option D correctly overrides set as an arrow function that logs and calls the original set. Option D uses a method shorthand but calls set recursively causing a stack overflow. Option D returns set's result which is undefined but not an error. Option D calls update with a value instead of a function, causing a runtime error.

🔧 Debug

advanced

Why does this writable store subscription not update the UI?

This Svelte component subscribes to a writable store but the UI does not update. What is the cause?

Svelte

<script>
  import { writable } from 'svelte/store';
  const data = writable(0);

  let value;
  data.subscribe(val => {
    value = val;
  });

  function increment() {
    data.update(n => n + 1);
  }
</script>

<button on:click={increment}>Increment</button>
<p>Value: {value}</p>

A The store is not updated correctly because update function is missing a return statement.

B The subscription does not trigger reactive updates because 'value' is not a reactive variable.

C The subscribe callback is never called because the store is not initialized properly.

D The button click handler is not connected to the increment function.

💡 Hint

In Svelte, variables assigned inside subscribe callbacks do not trigger UI updates unless reactive.

The variable 'value' is assigned inside subscribe but is not reactive. The UI does not update because Svelte does not track changes to plain variables outside reactive declarations or $store syntax.

🧠 Conceptual

expert

What happens when multiple components share and update the same writable store?

Two Svelte components import the same writable store and update it independently. What is the expected behavior?

A Both components see the same store value and updates from one component reflect immediately in the other.

B Each component has its own copy of the store, so updates do not affect the other component.

C Updates in one component cause errors in the other due to conflicting subscriptions.

D The store resets to its initial value whenever a component updates it.

💡 Hint

Writable stores are singletons when imported from the same module.

Writable stores are shared instances. When multiple components import the same store, they share the same state. Updates in one component update the store and notify all subscribers, so other components see the change immediately.

Practice

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

easy

A. To style components dynamically

B. To hold data that can be changed and shared across components

C. To create static, unchangeable data

D. To handle routing between pages

Solution

1. Step 1: Understand writable store role

   Writable stores in Svelte are designed to hold data that can be changed and shared reactively.

2. Step 2: Compare options

   Only To hold data that can be changed and shared across components correctly describes writable stores as changeable and shareable data holders.

3. Final Answer:

   To hold data that can be changed and shared across components -> Option B

4. Quick Check:

   Writable store = changeable shared data [OK]

Hint: Writable stores hold changeable shared data [OK]

Common Mistakes:

• Confusing writable stores with static data
• Thinking writable stores handle styling or routing
• Assuming writable stores cannot be updated

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

easy

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

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

C. const count = writable(0); without import

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

Solution

1. Step 1: Check import statement

   The writable store must be imported from 'svelte/store' using { writable }.

2. Step 2: Verify store creation syntax

   Creating a writable store uses writable(initialValue), so import { writable } from 'svelte/store'; const count = writable(0); is correct.

3. Final Answer:

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

4. Quick Check:

   Writable store import and creation = import { writable } from 'svelte/store'; const count = writable(0); [OK]

Hint: Writable stores need import { writable } from 'svelte/store' [OK]

Common Mistakes:

• Using readable instead of writable
• Forgetting to import writable
• Wrong import path or syntax

3. Given this code:

import { writable } from 'svelte/store';
const count = writable(5);
count.update(n => n + 3);
console.log($count);

What will be logged to the console?

medium

A. Error: $count is undefined

B. 8

C. 3

D. 5

Solution

1. Step 1: Understand store update

   The update method changes the store value from 5 to 8 by adding 3.

2. Step 2: Check usage of $count outside component

   The $ prefix to access store value works only inside Svelte components, not in plain JS code like console.log.

3. Final Answer:

   Error: $count is undefined -> Option A

4. Quick Check:

   $ prefix only works inside components [OK]

Hint: Use $ only inside components, not in plain JS [OK]

Common Mistakes:

• Assuming $count works outside components
• Ignoring that update changes value
• Expecting console.log to show store value directly

4. What is wrong with this code snippet?

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

medium

A. The initial value must be a string

B. You cannot use set on writable stores

C. Missing import for set function

D. count + 1 is invalid because count is a store, not a number

Solution

1. Step 1: Identify what count represents

   count is a writable store object, not a number, so count + 1 is invalid.

2. Step 2: Correct way to update store

   You must use count.update(n => n + 1) or count.set(value) with a number, not count + 1.

3. Final Answer:

   count + 1 is invalid because count is a store, not a number -> Option D

4. Quick Check:

   Store object + number is invalid [OK]

Hint: Use update or get value before set, not store + number [OK]

Common Mistakes:

• Trying to add number directly to store object
• Forgetting to use update for changes
• Assuming set needs import separately

5. You want to create a writable store that holds a number starting at 10. Then you want to double its value only if it is less than 50. Which code correctly does this?

hard

A. const num = writable(10);
num.set(20);

B. const num = writable(10);
num.set(n => n < 50 ? n * 2 : n);

C. const num = writable(10);
num.update(n => n < 50 ? n * 2 : n);

D. const num = writable(10);
num.update(n => n * 2);

Solution

1. Step 1: Create writable store with initial value 10

   Using writable(10) correctly sets the initial number.

2. Step 2: Use update with condition to double if less than 50

   update receives current value n and returns n*2 if n < 50, else n unchanged, matching requirement.

3. Step 3: Check other options

   const num = writable(10); num.set(n => n < 50 ? n * 2 : n); wrongly uses set with a function, which is invalid. const num = writable(10); num.update(n => n * 2); doubles unconditionally. const num = writable(10); num.set(20); sets fixed 20 ignoring condition.

4. Final Answer:

   const num = writable(10); num.update(n => n < 50 ? n * 2 : n); -> Option C

5. Quick Check:

   Use update with condition to change value [OK]

Hint: Use update(fn) with condition to change store value [OK]

Common Mistakes:

• Using set with a function instead of a value
• Not applying condition inside update
• Setting fixed value ignoring condition