svelte:self for recursive components - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is svelte:self used for in Svelte?

svelte:self lets a component include itself inside its own template. This is useful for creating recursive components, like trees or nested lists.

beginner

How does svelte:self help with recursive rendering?

It allows the component to call itself with new data, so it can render nested or repeated structures without needing a separate component.

intermediate

Show a simple example of using svelte:self to render a nested list.

<pre><code>&lt;script&gt;
  export let items = [];
&lt;/script&gt;

&lt;ul&gt;
  {#each items as item}
    &lt;li&gt;{item.name}
      {#if item.children}
        &lt;svelte:self items={item.children} /&gt;
      {/if}
    &lt;/li&gt;
  {/each}
&lt;/ul&gt;
</code></pre>

intermediate

Why is it important to have a base case when using svelte:self recursively?

Without a base case (like no children), the recursion would never stop and cause an error or crash. The base case stops the recursion safely.

beginner

Can svelte:self be used with props? How?

Yes. You can pass props to svelte:self just like any other component. This lets each recursive call get its own data to render.

What does <svelte:self /> do inside a Svelte component?

A Imports another component

B Includes the same component inside itself recursively

C Defines a new component

D Calls a JavaScript function

<svelte:self /> is used to include the current component inside itself, enabling recursion.

What must you ensure when using svelte:self recursively?

A That the component has a base case to stop recursion

B That the component imports itself

C That the component uses class syntax

D That the component has no props

A base case prevents infinite recursion and possible crashes.

How do you pass data to a recursive call using svelte:self?

A By calling a function inside the component

B By using global variables

C You cannot pass data to <code>svelte:self</code>

D By passing props like <code>&lt;svelte:self items={newData} /&gt;</code>

You pass props to svelte:self just like any other component.

Which of these is a good use case for svelte:self?

A Fetching data from an API

B Styling a button

C Rendering a nested comment thread

D Handling user input

Nested structures like comment threads are perfect for recursive components.

What happens if you forget the base case in a recursive component using svelte:self?

A The app crashes or freezes due to infinite recursion

B The component renders once and stops

C The component ignores the recursion

D The component throws a syntax error

Without a base case, recursion never ends, causing a crash or freeze.

Explain how svelte:self enables recursive components and why a base case is necessary.

Think about how a component can call itself and when it should stop.

Describe a real-life example where you would use svelte:self and how you would pass data to each recursive call.

Imagine a folder inside a folder inside a folder.