svelte:component for dynamic components - Deep Dive

Overview - svelte:component for dynamic components

What is it?

In Svelte, is a special tag that lets you show different components dynamically. Instead of writing each component directly, you can choose which one to display while the app runs. This helps when you want to switch views or load parts based on user actions or data.

Why it matters

Without dynamic components, you would have to write many if-else blocks or duplicate code to show different parts of your app. makes your code cleaner and more flexible. It allows apps to feel more responsive and personalized, improving user experience and developer productivity.

Where it fits

Before learning , you should understand basic Svelte components and how to pass props. After mastering it, you can explore advanced dynamic UI patterns, component lazy loading, and state-driven rendering.

Mental Model

Core Idea

lets you pick and show a component on the fly by passing its reference as a variable.

Think of it like...

Imagine a TV remote that can switch between different channels (components). Instead of changing the TV itself, you just press buttons to pick which channel to watch.

┌─────────────────────────────┐
│      <svelte:component>      │
│  ┌───────────────────────┐  │
│  │ Component variable    │  │
│  │ (holds which to show) │  │
│  └─────────┬─────────────┘  │
│            │                │
│  ┌─────────▼─────────────┐  │
│  │  Render chosen component│
│  └───────────────────────┘  │
└─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

Basic Svelte component usage

Concept: Learn how to create and use simple Svelte components.

Create a component file, e.g., Button.svelte, with a button element. Import it in another file and use it by writing

Result

You see a button rendered on the page from the Button component.

Understanding how to create and use components is essential before making them dynamic.

2

Foundation

Passing props to components

Concept: Learn how to send data into components using props.

In Button.svelte, declare a prop like 'export let label;'. When using

Result

The button text changes based on the label prop passed.

Props allow components to be flexible and customizable, a key step before dynamic selection.

3

Intermediate

Using variables to hold components

🤔Before reading on: do you think you can store a component in a variable and use it directly in markup? Commit to yes or no.

Concept: Learn that components can be stored in variables and passed around like data.

Import multiple components, e.g., Button and Card. Create a variable 'let current = Button;'. You cannot write directly, but you can use to render it.

Result

The Button component renders because current points to it.

Knowing components are values you can assign to variables unlocks dynamic rendering.

4

Intermediate

Switching components dynamically

🤔Before reading on: do you think changing the variable holding the component will update the UI automatically? Commit to yes or no.

Concept: Learn how changing the component variable updates the rendered component automatically.

Add buttons to switch 'current' between Button and Card components on click. The tag updates to show the selected component without page reload.

Result

Clicking buttons changes the displayed component instantly.

Understanding reactive updates with dynamic components helps build interactive UIs.

5

Intermediate

Passing props to dynamic components

Concept: Learn how to send props to components rendered with .

Use to pass props. The dynamic component receives and uses the props as normal.

Result

The displayed component shows the passed label or data correctly.

Props work seamlessly with dynamic components, keeping flexibility intact.

6

Advanced

Handling events from dynamic components

🤔Before reading on: do you think event handlers work the same on dynamic components as on static ones? Commit to yes or no.

Concept: Learn how to listen to events emitted by dynamic components.

Add event handlers like on:click on . The events bubble up and can be handled in the parent component just like static components.

Result

Clicking inside the dynamic component triggers the parent’s event handler.

Knowing event forwarding works with dynamic components enables complex interactive patterns.

7

Expert

Performance and lifecycle nuances

🤔Before reading on: do you think switching dynamic components preserves their state or resets it? Commit to your answer.

Concept: Understand how Svelte creates and destroys dynamic components affecting state and lifecycle.

When the component variable changes, Svelte destroys the old component instance and creates a new one. This resets local state and triggers lifecycle hooks like onMount and onDestroy.

Result

Switching components resets their internal state and runs lifecycle events.

Knowing this prevents bugs related to unexpected state loss and helps design better component switching logic.

Under the Hood

works by taking a component constructor (a function or class) as a variable. At runtime, Svelte creates an instance of that component and inserts its rendered output into the DOM. When the variable changes, Svelte tears down the old instance and builds a new one. Props and events are wired through this dynamic instance. This is possible because Svelte compiles components into efficient JavaScript classes that can be instantiated on demand.

Why designed this way?

This design allows maximum flexibility with minimal runtime overhead. Instead of complex if-else rendering or manual DOM manipulation, Svelte leverages its compiled output to instantiate components dynamically. Alternatives like manual conditional rendering are more verbose and less maintainable. The tradeoff is that switching components recreates them, which is simpler and more predictable than trying to preserve internal state automatically.

┌───────────────┐       ┌─────────────────────┐
│ Component Var │──────▶│ Instantiate Component│
└──────┬────────┘       └─────────┬───────────┘
       │                          │
       │                          ▼
       │                 ┌─────────────────┐
       │                 │ Render Component│
       │                 └────────┬────────┘
       │                          │
       ▼                          ▼
┌───────────────┐          ┌───────────────┐
│ Old Instance  │◀─────────│ DOM Insertion │
│ Destroyed     │          └───────────────┘
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does keep the internal state of a component when switching to another and back? Commit to yes or no.

Common Belief: Many think dynamic components keep their state when switched out and back in.

Reality: Switching components destroys the old instance and creates a new one, resetting all internal state.

Why it matters: Assuming state is preserved can cause bugs where user input or UI state unexpectedly resets.

Quick: Can you use without importing the components first? Commit to yes or no.

Common Belief: Some believe you can pass component names as strings and Svelte will find them automatically.

Reality: You must import components and pass their references; strings do not work.

Why it matters: Trying to use strings leads to runtime errors and confusion.

Quick: Does support passing arbitrary HTML or elements as children? Commit to yes or no.

Common Belief: People often think you can nest content inside like normal components.

Reality: does not support children; you must pass content via props or slots inside the dynamic component itself.

Why it matters: Misunderstanding this causes layout and rendering issues.

Quick: Is slower than static components in all cases? Commit to yes or no.

Common Belief: Some assume dynamic components always hurt performance significantly.

Reality: While there is some overhead creating/destroying instances, Svelte’s compiled output keeps it minimal and efficient.

Why it matters: Avoiding dynamic components out of fear can lead to more complex and less maintainable code.

Expert Zone

1

Dynamic components recreate their entire instance on switch, so local state and lifecycle hooks reset; this is by design for predictability.

2

You can combine with keyed each blocks to optimize rendering when switching lists of components.

3

Event forwarding works seamlessly, but you must explicitly handle and re-emit events if wrapping dynamic components inside others.

When NOT to use

Avoid when you need to preserve component state across switches; consider conditional rendering with keyed blocks or state lifting instead. Also, if the set of components is fixed and small, static if-else blocks may be simpler and clearer.

Production Patterns

In real apps, is used for tab views, modal content switching, plugin systems, and dashboards where UI parts change based on user roles or data. It pairs well with stores to drive which component shows and with lazy loading to reduce initial bundle size.

Connections

Polymorphism in Object-Oriented Programming

Both allow choosing behavior or implementation dynamically at runtime.

Understanding polymorphism helps grasp how swaps components like objects with different methods, enabling flexible UI behavior.

Factory Design Pattern

Both create instances of classes or components based on input or conditions.

Seeing as a factory that builds components on demand clarifies its role in dynamic UI construction.

Switching TV Channels

Changing the component is like changing the channel to watch different content.

This real-world example helps understand the concept of dynamic component rendering intuitively.

Common Pitfalls

#1 Trying to pass component names as strings instead of references.

Wrong approach:

Correct approach:

import Button from './Button.svelte';

Root cause:

Misunderstanding that Svelte requires actual component references, not strings.

#2 Expecting dynamic components to keep their internal state when switched.

Wrong approach:

Switch component variable back and forth expecting input fields to keep values.

Correct approach:

Manage state outside components or use keyed blocks to preserve instances.

Root cause:

Not realizing that Svelte destroys and recreates components on change.

#3 Trying to nest children inside directly.

Wrong approach:

Child content

Correct approach:

Pass content via props or slots inside the component itself.

Root cause:

Assuming behaves like normal components with children.

Key Takeaways

allows rendering different components dynamically by passing their references as variables.

Switching dynamic components recreates them, resetting internal state and triggering lifecycle events.

Props and event handlers work normally with dynamic components, keeping flexibility and interactivity.

You must import components and pass references; strings or names alone do not work.

Use to build flexible, clean, and maintainable UIs that adapt to user actions or data.