Custom store logic in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this custom store subscription?

Consider this Svelte custom store that counts up every second. What will be logged to the console after 3 seconds?

Svelte

import { readable } from 'svelte/store';

const counter = readable(0, function start(set) {
  let count = 0;
  const interval = setInterval(() => {
    count += 1;
    set(count);
  }, 1000);
  return () => clearInterval(interval);
});

counter.subscribe(value => console.log(value));

A 0, 1, 2, 3

B 1, 2, 3

C 1, 2, 3, 4

D 0, 1, 2

💡 Hint

The subscribe callback is fired immediately with the initial value 0, then after each set call.

The readable store's subscribe invokes the callback synchronously with the initial value 0 upon subscription. The start function then sets up an interval that calls set with 1 after 1 second, 2 after 2 seconds, and 3 after 3 seconds, logging 0, 1, 2, 3.

❓ state_output

intermediate

What is the value of the custom writable store after these updates?

Given this custom writable store, what is the final value after the code runs?

Svelte

import { writable } from 'svelte/store';

function createCounter() {
  const { subscribe, set, update } = writable(0);
  return {
    subscribe,
    increment: () => update(n => n + 1),
    reset: () => set(0)
  };
}

const counter = createCounter();
counter.increment();
counter.increment();
counter.reset();
counter.increment();

A 0

B 2

C 3

D 1

💡 Hint

Track each method call and its effect on the store value.

The store starts at 0. Two increments make it 2. Then reset sets it back to 0. Finally, one increment makes it 1.

📝 Syntax

advanced

Which option correctly implements a custom store with a derived value?

Which code snippet correctly creates a custom store that holds a number and a derived store that doubles it?

A

import { writable, derived } from 'svelte/store';
const num = writable(5);
const double = derived(num, num => num * 2);
export { num, double };

B

import { writable, derived } from 'svelte/store';
const num = writable(5);
const double = derived(num, $num => $num * 2);
export { num, double };

C

import { writable, derived } from 'svelte/store';
const num = writable(5);
const double = derived(num, ($num) => { return $num * 2; });
export { num, double };

D

import { writable, derived } from 'svelte/store';
const num = writable(5);
const double = derived(num, (value) => value * 2);
export { num, double };

💡 Hint

Remember the derived store callback receives the store value as the first argument, often named with a $ prefix in examples.

Option B uses the correct syntax with the derived store callback receiving the value as $num and returning $num * 2. Option B misses the $ prefix which is just a naming convention but valid. Option B and D are also valid syntaxes but the question asks for the correct implementation following common Svelte patterns, which is option B.

🔧 Debug

advanced

Why does this custom store cause a memory leak?

Examine this custom store code. Why might it cause a memory leak when used in a Svelte component?

Svelte

import { readable } from 'svelte/store';

function createTimer() {
  let count = 0;
  const interval = setInterval(() => {
    count += 1;
  }, 1000);
  return readable(count, set => {
    set(count);
    return () => clearInterval(interval);
  });
}

const timer = createTimer();

A The interval starts immediately and is never cleared because the cleanup function is returned inside the readable constructor but the interval is created outside the start function.

B The set function is called only once, so the store never updates.

C The count variable is not reactive, so the store value never changes.

D The readable store requires a writable store to update values.

💡 Hint

Consider when the interval starts and when the cleanup function runs.

The interval is created immediately when createTimer runs, outside the readable start function. The cleanup function returned inside readable only clears the interval when the store is unsubscribed, but since the interval was created before subscription, it never gets cleared properly, causing a memory leak.

🧠 Conceptual

expert

What is the main benefit of using a custom store with start and stop logic in Svelte?

Why would you create a custom store with explicit start and stop functions instead of a simple writable store?

A To automatically persist store data to local storage without extra code.

B To allow multiple components to write to the store simultaneously without conflicts.

C To manage resource-intensive processes only while there are active subscribers, improving performance and avoiding unnecessary work.

D To enable two-way binding with form inputs without using Svelte's bind directive.

💡 Hint

Think about when you want to start or stop background tasks based on usage.

Custom stores with start and stop logic allow you to start processes like timers or data fetching only when there are subscribers, and stop them when none remain. This saves resources and improves app performance.

Practice

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

easy

A. To disable reactivity in the app

B. To add custom methods and control how data updates and shares

C. To make the store work only on the server side

D. To replace the built-in writable store completely

Solution

1. Step 1: Understand what a custom store does

   A custom store extends the basic writable store by adding your own methods to control data updates and sharing.

2. Step 2: Compare options with this understanding

   Only "To add custom methods and control how data updates and shares" correctly describes this purpose. The other options misunderstand the role of custom stores: disabling reactivity, replacing the built-in writable store completely, or server-side only.

3. Final Answer:

   To add custom methods and control how data updates and shares -> Option B

4. Quick Check:

   Custom store purpose = Add custom methods [OK]

Hint: Custom stores add your own methods to writable stores [OK]

Common Mistakes:

• Thinking custom stores replace writable stores entirely
• Believing custom stores disable reactivity
• Assuming custom stores only run on the server

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

easy

A. import { writable } from 'svelte/store'; function createStore() { const { subscribe, update } = writable(0); return { subscribe, increment: () => update(n => n + 1) }; }

B. import { readable } from 'svelte/store'; function createStore() { const { subscribe } = readable(0); return { subscribe, increment: () => {} }; }

C. import { writable } from 'svelte/store'; function createStore() { const { subscribe, set } = writable(0); return { subscribe, increment: () => set(n => n + 1) }; }

D. import { store } from 'svelte/store'; function createStore() { return { subscribe: () => {}, increment: () => {} }; }

Solution

1. Step 1: Check import and store creation

   import { writable } from 'svelte/store'; function createStore() { const { subscribe, update } = writable(0); return { subscribe, increment: () => update(n => n + 1) }; } correctly imports writable and uses update to change the value.

2. Step 2: Verify method usage

   import { writable } from 'svelte/store'; function createStore() { const { subscribe, set } = writable(0); return { subscribe, increment: () => set(n => n + 1) }; } incorrectly uses set with a function argument, which is invalid. import { readable } from 'svelte/store'; function createStore() { const { subscribe } = readable(0); return { subscribe, increment: () => {} }; } uses readable which is read-only. import { store } from 'svelte/store'; function createStore() { return { subscribe: () => {}, increment: () => {} }; } imports a non-existent store.

3. Final Answer:

   import { writable } from 'svelte/store'; function createStore() { const { subscribe, update } = writable(0); return { subscribe, increment: () => update(n => n + 1) }; } -> Option A

4. Quick Check:

   Correct syntax uses writable and update() [OK]

Hint: Use writable and update() for custom store methods [OK]

Common Mistakes:

• Using set() with a function argument
• Using readable store when write access is needed
• Importing non-existent store types

3. Given this custom store code, what will be logged after calling counter.increment() twice?

import { writable } from 'svelte/store';
function createCounter() {
  const { subscribe, update } = writable(0);
  return {
    subscribe,
    increment: () => update(n => n + 1)
  };
}
const counter = createCounter();
counter.subscribe(value => console.log(value));
counter.increment();
counter.increment();

medium

A. 0, 1, 2

B. 1, 2

C. 0, 2

D. 2

Solution

1. Step 1: Understand subscription behavior

   Subscribing logs the current value immediately, so 0 is logged first.

2. Step 2: Trace increments and logs

   Each increment increases the value by 1 and triggers the subscriber, logging 1 then 2.

3. Final Answer:

   0, 1, 2 -> Option A

4. Quick Check:

   Subscription logs initial and updates [OK]

Hint: Subscription logs initial value immediately [OK]

Common Mistakes:

• Ignoring initial subscription log
• Assuming increments log only final value
• Confusing update with set behavior

4. Identify the error in this custom store code:

import { writable } from 'svelte/store';
function createTimer() {
  const { subscribe, set } = writable(0);
  let interval = null;
  return {
    subscribe,
    start: () => {
      interval = setInterval(() => set(n + 1), 1000);
    },
    stop: () => clearInterval(interval)
  };
}

medium

A. Not clearing interval on stop

B. Missing update method for incrementing

C. Using set(n + 1) without defining n

D. Incorrect import of writable store

Solution

1. Step 1: Check the setInterval callback

   The callback uses set(n + 1) but n is not defined anywhere in scope.

2. Step 2: Understand correct usage

   To increment the value, update should be used or the current value tracked. Using set with undefined n causes an error.

3. Final Answer:

   Using set(n + 1) without defining n -> Option C

4. Quick Check:

   Undefined variable in set() causes error [OK]

Hint: Use update() or track value before set() [OK]

Common Mistakes:

• Using set() with undefined variable
• Forgetting to clear intervals
• Confusing set and update methods

5. You want to create a custom store that holds a list of items and provides a method to add unique items only (no duplicates). Which implementation correctly achieves this?

hard

A. import { writable } from 'svelte/store'; function createList() { const { subscribe, update } = writable([]); return { subscribe, add: (item) => update(list => [...list, item]) }; }

B. import { writable } from 'svelte/store'; function createList() { const { subscribe, set } = writable([]); return { subscribe, add: (item) => set(list => list.includes(item) ? list : [...list, item]) }; }

C. import { readable } from 'svelte/store'; function createList() { const { subscribe } = readable([]); return { subscribe, add: (item) => {} }; }

D. import { writable } from 'svelte/store'; function createList() { const { subscribe, update } = writable([]); return { subscribe, add: (item) => update(list => list.includes(item) ? list : [...list, item]) }; }

Solution

1. Step 1: Check method to add unique items

   import { writable } from 'svelte/store'; function createList() { const { subscribe, update } = writable([]); return { subscribe, add: (item) => update(list => list.includes(item) ? list : [...list, item]) }; } uses update and checks if the item exists before adding, preventing duplicates.

2. Step 2: Verify other options

   import { writable } from 'svelte/store'; function createList() { const { subscribe, set } = writable([]); return { subscribe, add: (item) => set(list => list.includes(item) ? list : [...list, item]) }; } incorrectly uses set with a function argument, which is invalid. import { readable } from 'svelte/store'; function createList() { const { subscribe } = readable([]); return { subscribe, add: (item) => {} }; } uses readable which is read-only. import { writable } from 'svelte/store'; function createList() { const { subscribe, update } = writable([]); return { subscribe, add: (item) => update(list => [...list, item]) }; } adds items without checking duplicates.

3. Final Answer:

   Custom store with update() and duplicate check -> Option D

4. Quick Check:

   Use update() and check includes() for uniqueness [OK]

Hint: Use update() with includes() check to avoid duplicates [OK]

Common Mistakes:

• Using set() with function argument
• Using readable store when write access needed
• Not checking for duplicates before adding