canonical__vvelte-5

Svelte 5 Best Practices

Overview

Feature	Svelte 5
Reactivity	Runes ($state, $derived, $effect)
Props	$props() rune
Events	Callback props
Snippets	Replace slots

---

Runes (New Reactivity System)

$state - Reactive State

<script>
  // Simple state
  let count = $state(0)
  
  // Object state (deeply reactive)
  let user = $state({
    name: 'John',
    email: '[email protected]'
  })
  
  function increment() {
    count++  // Direct mutation works
  }
  
  function updateName(name) {
    user.name = name  // Deep reactivity
  }
</script>

<button onclick={increment}>
  Count: {count}
</button>

$derived - Computed Values

<script>
  let count = $state(0)
  let doubled = $derived(count * 2)
  
  // Complex derivations
  let items = $state([1, 2, 3, 4, 5])
  let total = $derived(items.reduce((a, b) => a + b, 0))
  let evenItems = $derived(items.filter(n => n % 2 === 0))
</script>

<p>Count: {count}, Doubled: {doubled}</p>

$effect - Side Effects

<script>
  let count = $state(0)
  
  // Runs when dependencies change
  $effect(() => {
    console.log('Count changed:', count)
    
    // Cleanup function (optional)
    return () => {
      console.log('Cleaning up')
    }
  })
  
  // Pre-effect (runs before DOM updates)
  $effect.pre(() => {
    // Useful for measuring DOM before updates
  })
</script>

---

Props

Basic Props with $props()

<script>
  let { name, count = 0, onUpdate } = $props()
</script>

<div>
  <h2>{name}</h2>
  <p>Count: {count}</p>
  <button onclick={() => onUpdate?.(count + 1)}>
    Increment
  </button>
</div>

TypeScript Props

<script lang="ts">
  interface Props {
    name: string
    count?: number
    onUpdate?: (value: number) => void
  }
  
  let { name, count = 0, onUpdate }: Props = $props()
</script>

Spread Props

<script>
  let { class: className, ...rest } = $props()
</script>

<div class={className} {...rest}>
  Content
</div>