How to Handle Recursion in Svelte

You can create recursive components in Svelte using a special component that calls the component it is defined in:

<script>
  export let count;
</script>

{#if count > 0}
  <span>Liftoff in {count}</span>
  <svelte:self count="{count - 1}" />
{/if}

<CountDown count="10" />

Take note that you can only use svelte:self in an if statement to prevent infinite loops.

Looking into Svelte 3Quickstart by creating a retro board in Svelte from scratchSvelte 3 promises a radical new approach to building user interfaces. Since it is a compiler, it works fundamentally different from other big frameworks...Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

Looking to improve your skills? Learn how to build reactive apps with Svelte + Tailwind.

---

Resources:

• The svelte:self component