svelte:self for recursive components - Step-by-Step Execution

Concept Flow - svelte:self for recursive components

Component starts rendering

↓

Check base case?

Yes→Render base content

No↓

Render svelte:self (recursive call)

↓

Repeat rendering with updated props

↓

Return rendered content

↓

Done

The component renders itself recursively using svelte:self until a base case stops recursion.

Execution Sample

Svelte

<script>
  export let count = 3;
</script>
{#if count > 0}
  <p>Count: {count}</p>
  <svelte:self count={count - 1} />
{:else}
  <p>Done!</p>
{/if}

This Svelte component calls itself recursively, decreasing count each time until zero.

Execution Table

Step	count Prop	Condition count>0	Action	Rendered Output
1	3	True	Render <p>Count: 3</p> and <svelte:self count=2>	<p>Count: 3</p> + recursive call
2	2	True	Render <p>Count: 2</p> and <svelte:self count=1>	<p>Count: 2</p> + recursive call
3	1	True	Render <p>Count: 1</p> and <svelte:self count=0>	<p>Count: 1</p> + recursive call
4	0	False	Render <p>Done!</p>	<p>Done!</p>
5	-	-	Return from recursion	All recursive outputs combined

💡 Recursion stops when count reaches 0, condition count>0 is false.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
count	3	2	1	0	0

Key Moments - 3 Insights

Why does the component stop calling itself?

Because the condition count > 0 becomes false at step 4 in the execution_table, so it renders the base case instead of calling svelte:self again.

What does svelte:self mean inside the component?

It means the component calls itself recursively, as shown in steps 1 to 3 in the execution_table where svelte:self is rendered with a smaller count.

How does the count variable change during recursion?

The count variable decreases by 1 each recursive call, tracked in variable_tracker from 3 down to 0.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the value of count?

A 3

B 2

C 1

D 0

💡 Hint

Check the 'count Prop' column at step 3 in the execution_table.

At which step does the component stop calling svelte:self?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look for when the condition count > 0 becomes false in the execution_table.

If the initial count was 2 instead of 3, how many times would svelte:self be called?

A 2 times

B 3 times

C 1 time

D 0 times

💡 Hint

Refer to variable_tracker and execution_table to see how count decreases each call.

Concept Snapshot

svelte:self lets a component call itself recursively.
Use a base case (like count <= 0) to stop recursion.
Pass updated props to svelte:self for each recursive call.
Each call renders part of the output until base case.
Useful for nested or tree-like UI structures.

Full Transcript

This example shows how a Svelte component uses svelte:self to call itself recursively. The component receives a count prop starting at 3. If count is greater than zero, it renders a paragraph showing the count and then calls itself with count decreased by one. This repeats until count reaches zero, where it renders a 'Done!' message instead of calling itself again. The execution_table tracks each recursive step, showing the count value, condition check, action, and rendered output. The variable_tracker shows how count changes from 3 down to 0. Key moments clarify why recursion stops and what svelte:self means. The visual quiz tests understanding of count values and recursion stopping point. The concept snapshot summarizes the pattern for recursive components in Svelte using svelte:self.