svelte-patterns

Svelte Patterns and Best Practices

This skill covers common component patterns, frequently made mistakes, best practices, and migration tips for Svelte development.

Component Patterns

Prop Patterns

<!-- Basic props with defaults -->
<script>
let { 
  title = 'Default Title',
  subtitle,
  isActive = false,
  items = []
} = $props();
</script>

<h1>{title}</h1>
{#if subtitle}
  <h2>{subtitle}</h2>
{/if}

<!-- Rest props pattern -->
<script>
let { class: className, ...restProps } = $props();
</script>

<div class="container {className}" {...restProps}>
  <slot />
</div>

Event Handling Patterns

<!-- Custom event callbacks via props -->
<script>
let { 
  onSubmit = () => {},
  onChange = () => {},
  onCancel
} = $props();

let value = $state('');

function handleSubmit(event) {
  event.preventDefault();
  onSubmit(value);
}

function handleChange(event) {
  value = event.target.value;
  onChange(value);
}
</script>

<form onsubmit={handleSubmit}>
  <input type="text" value={value} oninput={handleChange} />
  <button type="submit">Submit</button>
  {#if onCancel}
    <button type="button" onclick={onCancel}>Cancel</button>
  {/if}
</form>

Snippet Pattern (Render Props)

<!-- Parent component -->
<script>
import DataList from './DataList.svelte';

let items = $state([
  { id: 1, name: 'Alice', role: 'Developer' },
  { id: 2, name: 'Bob', role: 'Designer' }
]);
</script>

<DataList {items}>
  {#snippet itemRenderer(item)}
    <div class="user-card">
      <h3>{item.name}</h3>
      <p>{item.role}</p>
    </div>
  {/snippet}
</DataList>

<!-- DataList.svelte -->
<script>
let { items, children } = $props();
</script>

<ul>
  {#each items as item}
    <li>
      {@render children.itemRenderer(item)}
    </li>
  {/each}
</ul>

Context API Pattern

<!-- ThemeProvider.svelte -->
<script>
import { setContext } from 'svelte';

let { children } = $props();
let theme = $state('light');

setContext('theme', {
  get current() { return theme; },
  toggle: () => { theme = theme === 'light' ? 'dark' : 'light'; }
});
</script>

<div class="theme-{theme}">
  {@render children()}
</div>

<!-- ThemeConsumer.svelte -->
<script>
import { getContext } from 'svelte';

const themeContext = getContext('theme');
</script>

<button onclick={themeContext.toggle}>
  Current theme: {themeContext.current}
</button>

Composition Pattern

<!-- useCounter.svelte.js -->
export function useCounter(initialValue = 0) {
  let count = $state(initialValue);
  
  return {
    get value() { return count; },
    increment: () => count++,
    decrement: () => count--,
    reset: () => count = initialValue
  };
}

<!-- Component.svelte -->
<script>
import { useCounter } from './useCounter.svelte.js';

const counter = useCounter(10);
</script>

<p>Count: {counter.value}</p>
<button onclick={counter.increment}>+</button>
<button onclick={counter.decrement}>-</button>
<button onclick={counter.reset}>Reset</button>

Common Mistakes

Mistake 1: Not Using Runes Properly

<!-- WRONG: Mixing old and new syntax -->
<script>
let count = 0;  // Not reactive in Svelte 5!
$: doubled = count * 2;  // Old syntax

function increment() {
  count += 1;  // Won't trigger reactivity
}
</script>

<!-- CORRECT: Use runes -->
<script>
let count = $state(0);
let doubled = $derived(count * 2);

function increment() {
  count += 1;
}
</script>

Mistake 2: Mutating Props Directly

<!-- WRONG: Mutating props -->
<script>
let { user } = $props();

function updateName(newName) {
  user.name = newName;  // Don't mutate props!
}
</script>

<!-- CORRECT: Use callbacks -->
<script>
let { user, onUpdateUser } = $props();

function updateName(newName) {
  onUpdateUser({ ...user, name: newName });
}
</script>

Mistake 3: Side Effects in Derived

<!-- WRONG: Side effects in $derived -->
<script>
let count = $state(0);

let doubled = $derived(() => {
  console.log('Calculating doubled');  // Side effect!
  localStorage.setItem('count', count);  // Side effect!
  return count * 2;
});
</script>

<!-- CORRECT: Use $effect for side effects -->
<script>
let count = $state(0);
let doubled = $derived(count * 2);

$effect(() => {
  console.log('Count changed to:', count);
  localStorage.setItem('count', count.toString());
});
</script>

Mistake 4: Missing Effect Cleanup

<!-- WRONG: No cleanup -->
<script>
let isActive = $state(false);

$effect(() => {
  if (isActive) {
    const interval = setInterval(() => {
      console.log('tick');
    }, 1000);
    // Missing cleanup! Memory leak!
  }
});
</script>

<!-- CORRECT: Return cleanup function -->
<script>
let isActive = $state(false);

$effect(() => {
  if (!isActive) return;
  
  const interval = setInterval(() => {
    console.log('tick');
  }, 1000);
  
  return () => clearInterval(interval);
});
</script>

Mistake 5: Incorrect Reactivity with Objects

<!-- WRONG: Reassigning nested properties -->
<script>
let user = $state({ name: 'Alice', settings: { theme: 'light' } });

function toggleTheme() {
  // This works but creates a new object unnecessarily
  user = { 
    ...user, 
    settings: { ...user.settings, theme: 'dark' } 
  };
}
</script>

<!-- CORRECT: Direct mutation with $state -->
<script>
let user = $state({ name: 'Alice', settings: { theme: 'light' } });

function toggleTheme() {
  // $state provides deep reactivity
  user.settings.theme = user.settings.theme === 'light' ? 'dark' : 'light';
}
</script>

Mistake 6: Overusing Effects

<!-- WRONG: Using effect for derived values -->
<script>
let count = $state(0);
let doubled = $state(0);

$effect(() => {
  doubled = count * 2;  // This should be $derived!
});
</script>

<!-- CORRECT: Use $derived -->
<script>
let count = $state(0);
let doubled = $derived(count * 2);
</script>

Mistake 7: Not Handling Async Properly

<!-- WRONG: Race conditions -->
<script>
let searchQuery = $state('');
let results = $state([]);

$effect(() => {
  fetch(`/api/search?q=${searchQuery}`)
    .then(res => res.json())
    .then(data => {
      results = data;  // May set stale results!
    });
});
</script>

<!-- CORRECT: Handle cancellation -->
<script>
let searchQuery = $state('');
let results = $state([]);

$effect(() => {
  const controller = new AbortController();
  
  fetch(`/api/search?q=${searchQuery}`, { signal: controller.signal })
    .then(res => res.json())
    .then(data => results = data)
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err);
    });
  
  return () => controller.abort();
});
</script>

Best Practices

Practice 1: Component Organization

<script>
// 1. Imports
import { getContext } from 'svelte';
import ChildComponent from './ChildComponent.svelte';

// 2. Props
let { title, items = [], onItemClick } = $props();

// 3. Context
const theme = getContext('theme');

// 4. State
let selectedIndex = $state(0);
let isExpanded = $state(false);

// 5. Derived values
let selectedItem = $derived(items[selectedIndex]);
let itemCount = $derived(items.length);

// 6. Effects
$effect(() => {
  console.log('Selected item changed:', selectedItem);
});

// 7. Functions
function handleItemClick(index) {
  selectedIndex = index;
  onItemClick?.(items[index]);
}

function toggleExpanded() {
  isExpanded = !isExpanded;
}
</script>

<!-- 8. Template -->
<div class="component">
  <!-- content -->
</div>

<!-- 9. Styles -->
<style>
  .component {
    /* styles */
  }
</style>

Practice 2: Type Safety with TypeScript

<script lang="ts">
interface User {
  id: number;
  name: string;
  email: string;
}

let { 
  users,
  onUserSelect 
}: { 
  users: User[]; 
  onUserSelect: (user: User) => void;
} = $props();

let selectedUser = $state<User | null>(null);

function selectUser(user: User): void {
  selectedUser = user;
  onUserSelect(user);
}
</script>

Practice 3: Reusable Logic with Modules

// useLocalStorage.svelte.js
export function useLocalStorage(key, initialValue) {
  let value = $state(
    typeof window !== 'undefined' 
      ? JSON.parse(localStorage.getItem(key) ?? JSON.stringify(initialValue))
      : initialValue
  );
  
  $effect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  });
  
  return {
    get value() { return value; },
    set value(newValue) { value = newValue; }
  };
}

// Component.svelte
<script>
import { useLocalStorage } from './useLocalStorage.svelte.js';

const storage = useLocalStorage('user-preferences', { theme: 'light' });
</script>

<p>Theme: {storage.value.theme}</p>
<button onclick={() => storage.value = { theme: 'dark' }}>
  Change Theme
</button>

Practice 4: Error Boundaries

<!-- ErrorBoundary.svelte -->
<script>
let { children } = $props();
let error = $state(null);

function handleError(event) {
  error = event.error;
  console.error('Caught error:', event.error);
}
</script>

<svelte:window onerror={handleError} />

{#if error}
  <div class="error-boundary">
    <h2>Something went wrong</h2>
    <p>{error.message}</p>
    <button onclick={() => error = null}>Try Again</button>
  </div>
{:else}
  {@render children()}
{/if}

Practice 5: Performance Optimization

<script>
let items = $state([...largeDataset]);

// Memoize expensive computations
let sortedItems = $derived.by(() => {
  console.log('Sorting items...');
  return [...items].sort((a, b) => a.name.localeCompare(b.name));
});

// Virtualization for long lists
let visibleRange = $state({ start: 0, end: 20 });
let visibleItems = $derived(sortedItems.slice(visibleRange.start, visibleRange.end));

function handleScroll(event) {
  const scrollTop = event.target.scrollTop;
  const itemHeight = 50;
  const start = Math.floor(scrollTop / itemHeight);
  visibleRange = { start, end: start + 20 };
}
</script>

<div class="list-container" onscroll={handleScroll}>
  {#each visibleItems as item}
    <div class="item">{item.name}</div>
  {/each}
</div>

Migration Tips

Tip 1: Gradual Migration

<!-- You can mix Svelte 4 and 5 syntax during migration -->
<script>
// Svelte 4 style (still works)
export let legacyProp;

// Svelte 5 style (new code)
let { newProp } = $props();
let count = $state(0);

// Gradually migrate reactive declarations
$: doubled = legacyProp * 2;  // Old
let tripled = $derived(newProp * 3);  // New
</script>

Tip 2: Store Migration

<!-- Before: Using stores -->
<script>
import { writable } from 'svelte/store';

const count = writable(0);

function increment() {
  count.update(n => n + 1);
}
</script>

<p>{$count}</p>

<!-- After: Using runes -->
<script>
let count = $state(0);

function increment() {
  count += 1;
}
</script>

<p>{count}</p>

Tip 3: Reactive Statement Migration

<!-- Before -->
<script>
let firstName = '';
let lastName = '';
$: fullName = `${firstName} ${lastName}`;
$: console.log('Name changed:', fullName);
</script>

<!-- After -->
<script>
let firstName = $state('');
let lastName = $state('');
let fullName = $derived(`${firstName} ${lastName}`);

$effect(() => {
  console.log('Name changed:', fullName);
});
</script>

Tip 4: Component Events Migration

<!-- Before: createEventDispatcher -->
<script>
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

function handleClick() {
  dispatch('click', { data: 'value' });
}
</script>

<!-- After: Callback props -->
<script>
let { onClick = () => {} } = $props();

function handleClick() {
  onClick({ data: 'value' });
}
</script>

Tip 5: Two-way Binding Migration

<!-- Before: bind directive -->
<script>
export let value;
</script>

<input bind:value />

<!-- After: Explicit binding with snippets -->
<script>
let { value, onValueChange } = $props();
</script>

<input 
  value={value} 
  oninput={(e) => onValueChange(e.target.value)} 
/>

Testing Patterns

// Component.test.js
import { render, fireEvent } from '@testing-library/svelte';
import Component from './Component.svelte';

test('increments counter', async () => {
  const { getByText } = render(Component);
  
  const button = getByText('Increment');
  await fireEvent.click(button);
  
  expect(getByText('Count: 1')).toBeInTheDocument();
});

test('calls callback on submit', async () => {
  const handleSubmit = vi.fn();
  const { getByText } = render(Component, { onSubmit: handleSubmit });
  
  const submitButton = getByText('Submit');
  await fireEvent.click(submitButton);
  
  expect(handleSubmit).toHaveBeenCalledOnce();
});

This skill provides comprehensive patterns and practices for building robust Svelte applications.