## State
Uses the `$state` function to define a variable as part of state and also initializes an initial value
```javascript
<script>
let count = $state(0);
function increment() {
count += 1;
}
</script>
<button onclick={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
```
## Deep State
The above approach reacts to *reassignments*. However another approach can react to *mutations* (they call this "deep reactivity").
[[Deep Reactivity (Svelte)]] is implemented using [JavaScript Proxies - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).
```javascript
<script>
let numbers = $state([1, 2, 3, 4]);
function addNumber() {
numbers.push(numbers.length + 1);
}
</script>
<p>{numbers.join(' + ')} = ...</p>
<button onclick={addNumber}>
Add a number
</button>
```
## Derived State
Helps to deduplicate state and keeps the app reactive.
```javascript
<script>
let numbers = $state([1, 2, 3, 4]);
let total = $derived(numbers.reduce((t, n) => t + n, 0));
function addNumber() {
numbers.push(numbers.length + 1);
}
</script>
<p>{numbers.join(' + ')} = ...</p>
<button onclick={addNumber}>
Add a number
</button>
```
## Effects
There is no reactivity in state alone. There must be an *effect* that *reacts* to it.
> `$effect()` is a last-resort effort. Put *side-effects* in an **event handler**.
## Universal Reactivity
Can hoist `$state()` to a `*.svelte.[js|ts]` file.