Variables & Reactivity

In React:

const [count, setCount] = useState(0)

In Svelte:

<script>
let count = 0
</script>

Example usage:

<script>
let count = 0
</script>

<button on:click={() => count++}>
Clicked {count} times
</button>

• Updating the var auto updates the UI.
• When count changes → UI updates.
• No setState.
• No hooks.

Reactive Statements ($:)

• $: means to run the var whenever its dependencies change.

Example 1:

<script>
let price = 10
let quantity = 2

$: total = price * quantity
</script>

<p>Total: {total}</p>

Example 2:

<script>
let name = "Min Hen"

$: greeting = "Hello " + name
</script>

<p>{greeting}</p>