svelte:self for recursive components - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Svelte recursive component render?

Consider a Svelte component that uses <svelte:self> to render a nested list recursively. What will be the rendered output for the given data?

Svelte

<script>
  export let node;
</script>
<ul>
  <li>{node.name}</li>
  {#if node.children}
    <ul>
      {#each node.children as child}
        <svelte:self node={child} />
      {/each}
    </ul>
  {/if}
</ul>

A <ul><li>Root</li><li>Child 1</li><li>Child 2</li><li>Grandchild</li></ul>

B <ul><li>Root</li><ul><ul><li>Child 1</li></ul><ul><li>Child 2</li><ul><ul><li>Grandchild</li></ul></ul></ul></ul></ul>

C <ul><li>Root</li><ul><li>Child 1</li><li>Child 2</li><ul><li>Grandchild</li></ul></ul></ul>

D <ul><li>Root</li></ul>

💡 Hint

Think about how <svelte:self> calls the same component recursively for each child node.

The component renders an unordered list. For each node, it shows the node's name in a list item. If the node has children, it recursively renders each child inside a nested <ul>. This creates nested lists reflecting the tree structure.

📝 Syntax

intermediate

Which option correctly uses <svelte:self> for recursion?

Which of the following Svelte snippets correctly uses <svelte:self> to recursively render a tree structure?

A <ul>{#each items as item}<li>{item.name}{#if item.children}<svelte:self node={item.children[0]} />{/if}</li>{/each}</ul>

B <ul>{#each items as item}<li>{item.name}<svelte:self items={item.children} /></li>{/each}</ul>

C <ul>{#each items as item}<li>{item.name}{#if item.children}<svelte:self node={item} />{/if}</li>{/each}</ul>

D <ul>{#each items as item}<li>{item.name}{#if item.children}<svelte:self node={item.children} />{/if}</li>{/each}</ul>

💡 Hint

Remember that <svelte:self> calls the same component and you must pass a single node, not an array, for recursion.

Option A correctly passes a single child node to <svelte:self> for recursive rendering. Option A passes an array to a prop named differently, which is incorrect. Option A passes the whole item again, causing infinite recursion. Option A passes an array instead of a single node, which is incorrect.

🔧 Debug

advanced

Why does this recursive Svelte component cause a maximum call stack error?

Given this Svelte component using <svelte:self>, why does it crash with a maximum call stack exceeded error?

Svelte

<script>
  export let node;
</script>
<ul>
  <li>{node.name}</li>
  {#if node.children}
    {#each node.children as child}
      <svelte:self node={node} />
    {/each}
  {/if}
</ul>

A The <code>{#each}</code> block syntax is incorrect.

B It uses <code>&lt;svelte:self&gt;</code> inside a loop which is not allowed.

C The <code>node</code> prop is missing causing undefined errors.

D It passes the same node repeatedly causing infinite recursion.

💡 Hint

Check what is passed to <svelte:self> inside the loop.

The component passes the same node prop to <svelte:self> inside the loop, so it calls itself infinitely with the same data, causing a stack overflow.

❓ state_output

advanced

What is the value of count after clicking all buttons in this recursive Svelte component?

This component renders buttons recursively using <svelte:self>. Each button increments a shared count state. What is the final count after clicking all buttons once?

Svelte

<script>
  import { writable } from 'svelte/store';
  export let node;
  const count = writable(0);
  function increment() {
    count.update(n => n + 1);
  }
</script>
<div>
  <button on:click={increment}>{node.name}</button>
  {#if node.children}
    {#each node.children as child}
      <svelte:self node={child} />
    {/each}
  {/if}
  <p>Count: {$count}</p>
</div>

A The count equals the number of leaf nodes only.

B The count equals the total number of nodes in the tree.

C The count remains 0 because state is local to each component instance.

D The count equals the number of root nodes only.

💡 Hint

Consider that count is a shared store imported once and used by all instances.

The count store is shared across all recursive instances. Clicking each button increments the same store, so after clicking all buttons once, the count equals the total number of nodes rendered.

🧠 Conceptual

expert

Why use <svelte:self> instead of importing the component for recursion?

In Svelte, what is the main advantage of using <svelte:self> for recursive components instead of importing the component by name and calling it recursively?

A <code>&lt;svelte:self&gt;</code> avoids circular import issues and simplifies recursion within the same component file.

B Using <code>&lt;svelte:self&gt;</code> improves runtime performance by caching the component instance.

C It automatically memoizes the component to prevent unnecessary re-renders.

D It allows passing props without explicitly declaring them in the component.

💡 Hint

Think about how importing a component inside itself can cause problems.

<svelte:self> lets a component call itself recursively without needing to import itself, which avoids circular import errors and keeps recursion simple and clean inside one file.