#svelte5
In single page applications that have interactivity, there has to be a way to change elements on the page without causing the entire page to refresh and re-render. In other words, certain elements have to be **reactive**.
In Svelte 5, Svelte uses what it calls **Runes** to declare something is a reactive element. in practice, this looks like this:
```svelte
<script>
let count = $state(0);
function increment() {
count += 1;
}
</script>
<button onClick={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
```
In this bit of code, `count` is declared to be reactive, starting with a value 0, and the function `increment` adds 1 to the value of `count`
The HTML creates a button when upon being clicked (`onClick`), the page displays either:
`Clicked 1 time'
OR
`Clicked (x #) times`
The code `{count === 1 ? 'time' : 'times'}` tells the code that when count is equal to 1, it should display `time` — else, it should read `times`
**In Svelte, state reacts to _reassignments_**. But it also reacts to _mutations_, which they refer to as **deep reactivity**. In order to achieve deep reactivity, Svelte 5 uses **proxies**, which means that **mutations to the proxy do not affect the original object.**
### Next:
[[Svelte 5 uses the $derived rune to derive state from other state]]