Svelte5

Svelte 5+ Best Practices

Core Principles

• Compiler as Framework: Understand Svelte compiles your code to small, imperative JavaScript at build time.
• Reactivity with Runes: Leverage Svelte 5's rune-based reactivity system ($state, $derived, $effect).

Component Structure (.svelte files)

• Structure: Organize components with <script>, template markup, and <style> sections.
• Keep Components Focused: Design components with a single, clear responsibility.
• Props: Define component inputs using export let propName or $props() rune.
  • Use $props() for better explicitness and compatibility with future features.
  • Provide default values for props if applicable (export let count = 0).
• Slots: Use <slot> elements (default and named) to allow parent components to inject content.
• Scoped Styles: Styles within <style> are scoped to the component by default.

Reactivity (Runes - Svelte 5+)

• State Declaration: Use $state() to declare reactive component state.

  <script>
    let count = $state(0);
  </script>
  

• Derived State: Use $derived() for values computed from other reactive state. Svelte optimizes these derivations.

  <script>
    let count = $state(0);
    let double = $derived(count * 2);
  </script>
  

• Side Effects: Use $effect() to run code reactively in response to state changes (e.g., logging, data fetching, manual DOM manipulation). Effects automatically track their dependencies.

  <script>
    let count = $state(0);
    $effect(() => {
      console.log('Count changed:', count);
      // Cleanup function (optional)
      return () => console.log('Effect cleanup');
    });
  </script>
  

• Avoid Top-Level Effects: Prefer $effect within the component instance scope. For module-level effects (rarely needed), use rune variants like $effect.root() with caution.

Templating Syntax

• Text Interpolation: Use curly braces {expression} to embed JavaScript expressions in text.
• Attribute Binding: Bind attributes using {attribute} shorthand or attribute={expression}.
• Event Handling: Use on:eventname to listen for DOM events.
• Conditional Rendering: Use {#if expression} ... {:else if expression} ... {:else} ... {/if} blocks.
• List Rendering: Use {#each list as item, index (key)} ... {:else} ... {/each} blocks. Always provide a unique key expression for efficient updates.
• Await Blocks: Use {#await promise} ... {:then value} ... {:catch error} ... {/await} to handle promises directly in the markup.