Svelte 5 Introduces Runes Streamlining Reactivity

Svelte 5 runes simplify reactivity and make it work outside components

Svelte announced a major change in the way it handles reactivity. So far reactivity is handled similarly, but a little bit different in various frameworks. Angular is opting for Signals, and React uses an explicit list of dependencies to handle fine-grained reactive updates.

Reactivity is a programming concept in which data update based on its dependencies. For example when you write such code:

let price = 4;
let amount = 5;

function totalPrice() {
   return price * amount;
}

let total = totalPrice();

The total value will be calculated once. In reactive programming the idea is that we want to update the value automatically when price and amount change, so we have total price updated when needed out of the box.

The new idea of runes handling such scenarios is described in this video: