Svelte · Senior · Question 12 of 75

Why is a `{#key}` block an expensive way to re-run child logic?

✓Correct answer: It destroys and recreates every element and component inside, losing state and DOM
2It forces SSR again
3It disables reactivity

Explanation

Wrap the dependent computation in $derived instead. Use {#key} deliberately, e.g. to replay transitions.

Further reading

Test yourself

Take the Svelte · Senior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.