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.

Practice

1. What is the main purpose of using svelte:self in a Svelte component?

easy

A. To allow a component to render itself recursively.

B. To import another component dynamically.

C. To create a global store accessible by all components.

D. To style a component using scoped CSS.

Solution

1. Step 1: Understand the role of svelte:self

   svelte:self is a special tag that lets a component include itself inside its own template.

2. Step 2: Identify the use case

   This is mainly used for recursive rendering, like showing nested lists or trees.

3. Final Answer:

   To allow a component to render itself recursively. -> Option A

4. Quick Check:

   Recursive rendering = A [OK]

Hint: Think 'self' means component calls itself recursively [OK]

Common Mistakes:

• Confusing svelte:self with dynamic imports
• Thinking it creates global state
• Assuming it styles components

2. Which of the following is the correct syntax to recursively render a component using svelte:self?

easy

A. <self />

B. <Component.self />

C. <Component.self() />

D. <svelte:self />

Solution

1. Step 1: Recall the special tag syntax

   The correct syntax to call the same component recursively is <svelte:self />.

2. Step 2: Eliminate incorrect options

   Other options use invalid or non-existent syntax in Svelte.

3. Final Answer:

   <svelte:self /> -> Option D

4. Quick Check:

   Correct recursive tag = C [OK]

Hint: Use exactly <svelte:self /> for recursion [OK]

Common Mistakes:

• Using Component.self which is invalid
• Omitting the svelte: prefix
• Trying to call self() as a function

3. Given this Svelte component snippet:

  <script>
    export let node;
  </script>

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

What will be rendered if node is:

{"name": "Root", "children": [{"name": "Child1"}, {"name": "Child2"}]}

medium

A. RootChild1Child2

B. RootChild1Child2

C. RootChild1Child2

D. Syntax error due to missing base case

Solution

1. Step 1: Understand the component structure

   The component shows the current node's name, then if it has children, it renders a list with recursive calls for each child.

2. Step 2: Apply the given data

   Root node name is "Root" with two children "Child1" and "Child2". So it renders Root, then a list with Child1 and Child2 each inside a <div>.

3. Final Answer:

   <div>Root</div><ul><li><div>Child1</div></li><li><div>Child2</div></li></ul> -> Option C

4. Quick Check:

   Recursive tree renders nested divs and ul/li = A [OK]

Hint: Look for recursive calls inside {#each} with svelte:self [OK]

Common Mistakes:

• Ignoring the {#if} condition for children
• Assuming children render without list tags
• Thinking recursion causes syntax error here

4. What is the main issue with this recursive Svelte component code?

<script>
  export let node;
</script>

<div>{node.name}</div>
<svelte:self node={node.children[0]} />

Assuming node.children can be empty or undefined.

medium

A. It causes infinite recursion if node.children is empty or undefined.

B. It will not render anything because svelte:self is used incorrectly.

C. It throws a syntax error because node.children[0] is invalid syntax.

D. It works fine without any issues.

Solution

1. Step 1: Analyze the recursive call

   The component calls itself with node.children[0] without checking if children exist or have elements.

2. Step 2: Identify the problem

   If node.children is empty or undefined, the recursion never stops, causing infinite recursion or runtime errors.

3. Final Answer:

   It causes infinite recursion if node.children is empty or undefined. -> Option A

4. Quick Check:

   Missing base case or check = infinite recursion [OK]

Hint: Always check children exist before recursive svelte:self call [OK]

Common Mistakes:

• Assuming recursion stops automatically
• Ignoring undefined or empty children arrays
• Thinking syntax error occurs instead of runtime issue

5. You want to display a nested comment thread using a recursive Svelte component with svelte:self. Each comment has a text and optional replies array. Which approach correctly prevents infinite recursion and shows all comments?

hard

A. Render comment text and always recursively render svelte:self with replies[0] without checks.

B. Render comment text, then if replies exists and is not empty, recursively render svelte:self for each reply inside a list.

C. Render comment text only and ignore replies to avoid recursion.

D. Use a loop inside <script> to flatten replies before rendering.

Solution

1. Step 1: Understand recursive rendering with base case

   To avoid infinite recursion, only recurse if replies exists and has items.

2. Step 2: Apply recursion properly

   Render the comment text, then use {#if replies && replies.length} and {#each replies as reply} with <svelte:self /> passing reply.

3. Final Answer:

   Render comment text, then if replies exists and is not empty, recursively render svelte:self for each reply inside a list. -> Option B

4. Quick Check:

   Base case + recursive list = B [OK]

Hint: Always check for non-empty replies before recursive call [OK]

Common Mistakes:

• Recursing without checking replies existence
• Ignoring replies and missing nested comments
• Trying to flatten replies in script instead of recursion