Chapter 5: Reactive State

Declaring Reactive Variables

In Svelte, any variable declared in the script block is potentially reactive:

<script>
  let count = 0;

  function increment() {
    count += 1;  // Svelte detects this change automatically
  }
</script>

<p>Count: {count}</p>
<button on:click={increment}>Increment</button>

When you assign a new value to count, Svelte automatically updates the UI. No need for setState() or action dispatchers!

Reactive Declarations

Use the $: label to create reactive declarations that automatically update when their dependencies change:

<script>
  let count = 0;
  let doubled;

  $: doubled = count * 2;
</script>

<p>Count: {count}</p>
<p>Doubled: {doubled}</p>
<button on:click={() => count++}>Increment</button>

The $: directive ensures that doubled updates whenever count changes.

Reactive Statements

You can also use $: for statements, not just declarations:

<script>
  let count = 0;

  $: if (count > 10) {
    console.log('Count exceeded 10!');
  }
</script>

Computed Properties

Create computed properties that re-calculate when dependencies change:

<script>
  let firstName = 'John';
  let lastName = 'Doe';

  $: fullName = `${firstName} ${lastName}`;
</script>

<p>Full name: {fullName}</p>

Svelte's reactivity system makes state management intuitive and efficient!