Sveltejs Academy · Lesson

{#key} for Forcing Re-render

Use the key block to destroy and recreate components when a value changes.

The key Block

{#key expr} destroys and recreates its contents whenever expr changes. Useful when you want a fresh component.

Wrap an animated element in {#key} to replay the transition each time the key changes.

{#key id}
  <div in:fade>{message}</div>
{/key}