svelte:self for recursive components - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render a recursive component using svelte:self.

Svelte

<script>
  export let depth = 0;
</script>

{#if depth < 3}
  <svelte:[1] depth={depth + 1} />
{/if}

Drag options to blanks, or click blank then click option'

Acomponent

Bself

Cchild

Dparent

Attempts:

3 left

💡 Hint

Common Mistakes

Using svelte:component instead of svelte:self.

Trying to use a custom tag name like child or parent.

The svelte:self tag allows a component to include itself recursively.

2fill in blank

medium

Complete the code to pass the updated depth prop to the recursive call.

Svelte

<script>
  export let depth = 0;
</script>

{#if depth < 5}
  <svelte:self depth=[1] />
{/if}

Drag options to blanks, or click blank then click option'

Adepth + 1

Bdepth

Cdepth * 2

Ddepth - 1

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the same depth value causing infinite recursion.

Decreasing depth which may cause unexpected behavior.

To go deeper in recursion, increase the depth by 1 each time.

3fill in blank

hard

Fix the error in the recursive component to avoid infinite recursion by adding a base case condition.

Svelte

<script>
  export let depth = 0;
</script>

{#if depth [1] 3}
  <svelte:self depth={depth + 1} />
{/if}

Drag options to blanks, or click blank then click option'

A>

B==

C>=

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using > or >= causing the recursion to never stop.

Using == which only runs at one depth level.

The recursion should continue only if depth is less than 3 to stop infinite loops.

4fill in blank

hard

Fill both blanks to create a recursive list where each item renders its children using svelte:self.

Svelte

<script>
  export let node;
</script>

<li>
  {node.name}
  {#if node.children && node.children.length [1] 0}
    <ul>
      {#each node.children as child}
        <svelte:[2] node={child} />
      {/each}
    </ul>
  {/if}
</li>

Drag options to blanks, or click blank then click option'

A>

Bself

C<

Dcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using < instead of > in the condition.

Using svelte:component instead of svelte:self.

The condition checks if children length is greater than 0, and svelte:self renders the same component recursively.

5fill in blank

hard

Fill all three blanks to correctly implement a recursive tree component with depth limit and recursive call.

Svelte

<script>
  export let node;
  export let depth = 0;
</script>

{#if depth [1] 2}
  <li>
    {node.name}
    {#if node.children && node.children.length [2] 0}
      <ul>
        {#each node.children as child}
          <svelte:[3] node={child} depth={depth + 1} />
        {/each}
      </ul>
    {/if}
  </li>
{/if}

Drag options to blanks, or click blank then click option'

A<

B>

Cself

Dcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using > instead of < for depth condition.

Using svelte:component instead of svelte:self.

Using < instead of > for children length check.

The recursion continues while depth is less than 2, children length is greater than 0, and svelte:self calls the same component recursively.

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