A Svelte 5 $derived expression must be side effect free because it is recomputed lazily

Derived values are pull based. The expression runs when the value is read and is cached until one of its dependencies changes, so it may run zero times on a render where nothing reads it, and more than once across a complex update.

Putting a fetch, a DOM write, a console log or a store update inside a $derived therefore produces work at times you cannot predict. Those belong in $effect, or better in an event handler.

For logic that needs statements rather than a single expression, use $derived.by with a function body; it has the same semantics and the same purity requirement. And prefer a derived over an effect that copies one piece of state into another: the effect version runs after the DOM update, which means one extra render and a frame where the two values disagree.