How to Fix Store Not Updating in Svelte

In Svelte, a store won't update if you modify its value directly without using its set or update methods. Always use store.set(newValue) or store.update(fn) to trigger reactive updates in components.

Why This Happens

Svelte stores are reactive objects that notify components when their value changes. If you change the store's internal value directly without using the provided set or update methods, Svelte won't know about the change and won't update the UI.

This often happens when developers try to mutate the store's value like a normal variable instead of using the store API.

javascript

import { writable } from 'svelte/store';

const count = writable(0);

// Incorrect: Directly modifying the value
count.subscribe(value => {
  // Trying to change value directly (this does nothing)
  value = value + 1;
});

Output

UI does not update; count remains 0 despite attempted change.

The Fix

Use the set or update methods provided by the store to change its value. This tells Svelte to notify all subscribers and update the UI accordingly.

javascript

import { writable } from 'svelte/store';

const count = writable(0);

// Correct: Use update method to change the value
count.update(n => n + 1);

Output

UI updates and shows the new count value incremented by 1.

Prevention

Always treat Svelte stores as immutable from outside and use their set or update methods to change values. Avoid mutating objects or arrays inside stores directly; instead, create new copies with changes and set them.

Use TypeScript or linting tools to catch direct mutations. Also, subscribe to stores only for reading values, not for changing them.

Related Errors

1. Store updates but UI does not reflect changes: Usually caused by mutating objects inside the store without creating a new object. Fix by copying and setting new objects.

2. Store subscription callback not called: Happens if you forget to use set or update or if the store is not imported correctly.

Key Takeaways

Always use store.set() or store.update() to change Svelte store values.

Never mutate store values directly; create new objects or arrays when needed.

Subscribe to stores only to read values, not to modify them.

Use linting or TypeScript to catch direct mutations early.

Proper store updates trigger reactive UI changes automatically.