{#key} for Forcing Re-render
Use the key block to destroy and recreate components when a value changes.
{#key} for Forcing Re-render is a free Sveltejs Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The key Block
{#key expr} destroys and recreates its contents whenever expr changes. Useful when you want a fresh component.
Restart Animations
Wrap an animated element in {#key} to replay the transition each time the key changes.
{#key id}
<div in:fade>{message}</div>
{/key}Reset Component State
Wrap a child with internal state in {#key id} to fully reset that state when the id changes.
{#key currentUser.id}
<UserProfile user={currentUser} />
{/key}Difference from each Key
The {#key} block keys a single element; {#each ... (key)} keys items in a list.
When to Use
Use when you want to reset complex internal state without manually clearing every field.
Performance Cost
Each key change tears down and rebuilds the subtree. Avoid wrapping huge trees if the key flips often.
Closing Tag
Close with {/key}.
Common Uses
Restart animations, reset uncontrolled inputs, force a fresh fetch when routing to a new entity.
Alternative: bind:this
Sometimes you can imperatively reset state with a ref. {#key} is cleaner for declarative resets.
Combine with Transitions
Pair with transitions to give a smooth visual cue that something fundamentally changed.
Avoid for Trivial Changes
Do not wrap purely reactive content in {#key} — Svelte already updates it efficiently.
Quick Check
What does {#key x} do when x changes?
Recap
{#key} forces a full destroy-and-rebuild whenever its expression changes, useful for resets and animation replays.
Frequently asked questions
Is the “{#key} for Forcing Re-render” lesson free?
Yes — the full text of “{#key} for Forcing Re-render” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “{#key} for Forcing Re-render”?
Use the key block to destroy and recreate components when a value changes. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “{#key} for Forcing Re-render” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- {#if} {#else if} {#else}
- {#each} with Index and Key
- {#key} for Forcing Re-render
- Nested {#each} and Keyed Updates