Skip to content
tezvyn:

How do Svelte Stores work and how do you create custom ones?

Source: svelte.devMediumHow cards are made

How do Svelte Stores work and how do you create custom ones?

Tests Svelte store contract mastery. A strong answer defines the subscribe/unsubscribe interface, wraps writable() with custom set/update logic, subscribes via $ prefix or manually, and uses $store in templates.

What's really being asked

Whether you understand the Svelte store contract at a deep level, not just the syntax. Interviewers want to see that you know a store is simply an object with a subscribe method that returns an unsubscribe function, and that you can build abstractions on top of writable rather than treating stores as magic global variables.

The full answer

First, the core contract. Any object with a subscribe method that accepts a callback and returns an unsubscribe function is a valid store. Second, creating a custom writable. You import writable from svelte/store, call it with an initial value, then wrap the returned set and update methods with your domain logic before exposing them. Third, script-level subscription. You can manually call store.subscribe and store the returned unsubscribe function to call on component unmount, or you can use the dollar-sign prefix like store which Svelte compiles into an auto-subscription that cleans up automatically when the component destroys. Fourth, template usage. Prefixing the store name with in the template gives you the current value reactively and handles teardown without boilerplate.

The mistakes people make

Returning something other than an unsubscribe function from a custom subscribe method. Treating store as a normal variable without acknowledging the auto-subscription lifecycle. Confusing Svelte 5 runes like state with the classic svelte/store API and suggesting you mix them inside a custom writable implementation. Forgetting that $ prefix only works inside svelte files, not in plain JavaScript modules. Storing the raw writable object in a component without subscribing and wondering why the template does not update.

What usually comes next

How would you make a store readonly? You could use the readonly helper from svelte/store or simply expose only the subscribe method. How do you derive state from multiple stores? Use derived from svelte/store. What is a StartStopNotifier and when does it fire? It runs when the first subscriber subscribes, useful for setting up external event listeners or WebSocket connections. How would you reset a store to its initial value? You would need to capture the initial value in closure and expose a reset method alongside set and update.

A concrete example

Suppose you need a counter that clamps between zero and ten. You would create a function createClampedCounter(initial) that calls writable(initial) and returns an object with subscribe, plus a custom set method that clamps the incoming value before calling the original set, and an update method that wraps the original update with a clamping function. In a component you would import it, instantiate const counter = createClampedCounter(0), then read it in the template with $counter and call counter.set(15) knowing it clamps to 10.

Interview question

Which of the following must be true for a plain JavaScript object to act as a valid Svelte store?

  • a.It must implement a subscribe method that accepts a callback and returns an unsubscribe function.Correct
  • b.It must be referenced with the $ prefix wherever it is used in code.
  • c.It must expose set and update methods so components can modify it.
  • d.It must be created using writable() or derived() from svelte/store.
Why?

Svelte recognizes any object as a store as long as it provides a subscribe method that takes a callback and returns an unsubscribe function. Option D is tempting but wrong because the $ prefix is consumer-side auto-subscription syntax in .svelte files, not part of the store's definition contract.

Just read this? Test yourself on what you have been reading.

Read the original → svelte.dev

You just looked this up. Could you explain it out loud?

That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on svelte — each one lists the topics its interview covers.

See open roles