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 <rich.harris@vercel.com>

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 `<script>` block to re-run, for example, consider wrapping those expressions in `$derived`.
+
 ## Events
 
 Any element attribute starting with `on` is treated as an event listener: