From 779fc642f95199b96fd63d21b90e2c54df0b4061 Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Mon, 21 Sep 2026 15:55:01 +0200 Subject: [PATCH] docs: add note about `#key` in best-practices --- 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 e2cb72828f..5c0b84f6be 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 change it can be very destructive and should be used sparingly. When using a `#key` block always ask yourself if the same behavior could be achieved using a `$derived`. + ## Events Any element attribute starting with `on` is treated as an event listener: