{#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. This is 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, and your progress syncs across the web and the CoddyKit app. The Sveltejs Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
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. 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. The Sveltejs Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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