From 7c2fcdae6a29fb3b36855dc8e86eb7ce4c56b93a Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Sat, 3 Oct 2026 13:35:20 +0200 Subject: [PATCH] docs: add note about `#key` in best-practices (#18851) We had this discussion with @teemingc about Astra using a key block as a way to re-render the whole component, which is very inefficient. When you think about it, a key block is actually almost never the right solution unless you want, for example, to rerun the animations. I propose to add this line here in the best practices skill/doc, which, in my opinion, makes sense. We should probably also add the same suggestions whenever we encounter a key block in the MCP Auto Fixer. What do you think about it? --------- Co-authored-by: Rich Harris --- documentation/docs/07-misc/01-best-practices.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/documentation/docs/07-misc/01-best-practices.md b/documentation/docs/07-misc/01-best-practices.md index d6d0cfcadc..ed7ddcbf7e 100644 --- a/documentation/docs/07-misc/01-best-practices.md +++ b/documentation/docs/07-misc/01-best-practices.md @@ -70,6 +70,10 @@ let color = type === 'danger' ? 'red' : 'green'; `$inspect.trace` is a debugging tool for reactivity. If something is not updating properly or running more than it should you can add `$inspect.trace(label)` as the first line of an `$effect` or `$derived.by` (or any function they call) to trace their dependencies and discover which one triggered an update. +## `#key` block + +While the `#key` block is useful when you want transitions/animations to run when a certain expression changes, it can be very expensive — it unmounts every element/component inside each time, so should be used sparingly. Instead of using `#key` to cause expressions in a child component's `