Store contract (subscribe method) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the subscribe method in a Svelte store?

The subscribe method lets components listen for changes in the store's value. When the value updates, the subscriber function runs with the new value.

beginner

What does the subscribe method return in Svelte stores?

It returns an unsubscribe function. Calling this function stops the component from listening to store updates, helping avoid memory leaks.

intermediate

How does the subscribe method relate to the store contract in Svelte?

The store contract requires a subscribe method that accepts a callback and returns an unsubscribe function. This standard lets Svelte know how to react to store changes.

intermediate

Why is it important that the subscribe method immediately calls the subscriber with the current value?

It ensures the subscriber has the latest store value right away, so components can render correctly without waiting for a change.

advanced

Show a simple example of a custom Svelte store implementing the subscribe method.

Example:
<pre>function createStore() {
  let value = 0;
  const subscribers = new Set();
  return {
    subscribe(run) {
      run(value);
      subscribers.add(run);
      return () => subscribers.delete(run);
    },
    set(newValue) {
      value = newValue;
      subscribers.forEach(s => s(value));
    }
  };
}</pre>

What does the subscribe method in a Svelte store expect as its argument?

A An event name to listen for

B A new value to set in the store

C A boolean to enable or disable the store

D A callback function to run on value changes

The subscribe method takes a callback function that runs whenever the store's value changes.

What should the subscribe method return?

A An unsubscribe function

B The current store value

C A promise resolving to the value

D Nothing (void)

It returns an unsubscribe function to stop listening to store updates.

When a subscriber function is passed to subscribe, when is it called?

A Only when the store value changes after subscription

B Only once when the store is created

C Immediately with the current value and on every change

D Never, unless manually triggered

The subscriber is called immediately with the current value and then on every update.

Why is the unsubscribe function important in Svelte stores?

A To reset the store value

B To stop listening and avoid memory leaks

C To subscribe again later

D To change the store type

Unsubscribing stops updates and prevents memory leaks.

Which of these is part of the Svelte store contract?

A A <code>subscribe</code> method that returns an unsubscribe function

B A <code>subscribe</code> method that returns a promise

C A <code>subscribe</code> method that accepts no arguments

D A <code>subscribe</code> method that modifies the store value

The store contract requires subscribe to accept a callback and return an unsubscribe function.

Explain how the subscribe method works in the Svelte store contract and why it is important.

Think about how components listen and stop listening to store updates.

Describe how you would implement a simple custom store with a subscribe method in Svelte.

Focus on managing subscribers and notifying them.

Practice

1. What does the subscribe method of a Svelte store do?

easy

A. It resets the store to its initial value.

B. It updates the store value directly.

C. It deletes the store permanently.

D. It lets you watch store changes and react immediately.

Solution

1. Step 1: Understand the purpose of subscribe

   The subscribe method allows you to listen to changes in the store's value.

2. Step 2: Identify what subscribe enables

   It lets your code react immediately whenever the store value changes.

3. Final Answer:

   It lets you watch store changes and react immediately. -> Option D

4. Quick Check:

   subscribe watches changes = C [OK]

Hint: Remember: subscribe means listen and react to changes [OK]

Common Mistakes:

• Thinking subscribe changes the store value
• Confusing subscribe with reset or delete
• Assuming subscribe returns the store value directly

2. Which of the following is the correct syntax to subscribe to a Svelte store named count?

easy

A. count.subscribe = value => console.log(value);

B. count.subscribe(value => console.log(value));

C. subscribe(count, value => console.log(value));

D. count.onSubscribe(value => console.log(value));

Solution

1. Step 1: Recall the store subscription syntax

   The correct way is to call subscribe as a method on the store with a callback.

2. Step 2: Match the syntax to the options

   count.subscribe(value => console.log(value)); correctly calls count.subscribe with a function to receive updates.

3. Final Answer:

   count.subscribe(value => console.log(value)); -> Option B

4. Quick Check:

   Method call subscribe with callback = A [OK]

Hint: subscribe is a method: store.subscribe(callback) [OK]

Common Mistakes:

• Assigning subscribe instead of calling it
• Using a non-existent method like onSubscribe
• Calling subscribe as a standalone function

3. Given the code below, what will be logged to the console?

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

medium

A. 0, 5

B. 0, 5, 10

C. 5, 10

D. 10

Solution

1. Step 1: Understand initial subscription behavior

   When subscribing, the callback immediately receives the current value, which is 0.

2. Step 2: Trace subsequent updates and unsubscription

   After setting to 5, the callback logs 5. Then unsubscribe() stops listening, so setting to 10 logs nothing.

3. Final Answer:

   0, 5 -> Option A

4. Quick Check:

   subscribe logs initial + updates until unsubscribe = B [OK]

Hint: subscribe logs current value immediately, stops after unsubscribe [OK]

Common Mistakes:

• Expecting logs after unsubscribe
• Missing initial immediate callback call
• Confusing set with update method

4. What is wrong with this code snippet?

import { writable } from 'svelte/store';
const count = writable(0);
count.subscribe(value => console.log(value));
count.unsubscribe();

medium

A. You must import subscribe separately from the store.

B. The subscribe callback must return a value.

C. You cannot call unsubscribe directly on the store.

D. The store must be initialized with a string, not a number.

Solution

1. Step 1: Understand unsubscribe usage

   The subscribe method returns an unsubscribe function to stop listening.

2. Step 2: Identify the error in calling unsubscribe

   Calling unsubscribe directly on the store is invalid; you must call the function returned by subscribe.

3. Final Answer:

   You cannot call unsubscribe directly on the store. -> Option C

4. Quick Check:

   unsubscribe is returned by subscribe, not a store method [OK]

Hint: unsubscribe comes from subscribe, not store itself [OK]

Common Mistakes:

• Calling unsubscribe on the store instead of returned function
• Expecting subscribe callback to return a value
• Confusing store initialization types

5. You want to create a custom store that logs every subscription and unsubscription. Which of the following correctly implements the subscribe method to follow the store contract?

hard

A. function customStore() {
let value = 0;
return {
subscribe(run) {
console.log('subscribed');
run(value);
return () => console.log('unsubscribed');
}
};
}

B. function customStore() {
let value = 0;
return {
subscribe(run) {
console.log('subscribed');
return () => console.log('unsubscribed');
}
};
}

C. function customStore() {
let value = 0;
return {
subscribe() {
console.log('subscribed');
return () => console.log('unsubscribed');
}
};
}

D. function customStore() {
let value = 0;
return {
subscribe(run) {
run(value);
console.log('subscribed');
}
};
}

Solution

1. Step 1: Check the subscribe method signature

   The subscribe method must accept a callback run and call it immediately with the current value.

2. Step 2: Verify logging and return of unsubscribe

   function customStore() { let value = 0; return { subscribe(run) { console.log('subscribed'); run(value); return () => console.log('unsubscribed'); } }; } logs 'subscribed' before calling run(value) and returns a function that logs 'unsubscribed'.

3. Step 3: Confirm distractors are invalid

   B misses calling run(value), C lacks run parameter, D misses returning the unsubscribe function.

4. Final Answer:

   correctly implements subscribe with logging and unsubscribe function -> Option A

5. Quick Check:

   subscribe calls run(value) and returns unsubscribe function [OK]

Hint: subscribe calls run(value) then returns unsubscribe function [OK]

Common Mistakes:

• Not calling run with current value
• Missing the unsubscribe function return
• Logging after calling run instead of before