Diagnose stale reactive values, props and ownership

Understand the likely causes

• Possible causes include an ordinary snapshot captured from reactive state, one-time initialization from reused page data, duplicated derived state, an untracked asynchronous read, shared nested references or mutation outside the declared owner. Special $props destructuring is compiler-managed; it must not be confused with arbitrary JavaScript destructuring or copying a prop into independent local state.

Follow the source, derivation and consumer read

Use one synthetic component path and record the selected Svelte version and runes/legacy mode. Identify who owns the source, whether the operation mutates a nested field or replaces the whole input, and where the consumer reads it. A correct source update can be hidden by a copied primitive in a reused page. Do not start with a global force-update workaround. Keep private application data out of logs and capture safe IDs and the minimal expected value instead. The first differing boundary may be a plain function call that received a value once rather than a getter for current reads.

Distinguish compiler-managed props from ordinary snapshots

Check whether $state and $derived occur in a documented compiled context. A plain JavaScript file calling a similarly named function is not a rune test. $props declarations have compiler behavior, while a later copy or ordinary destructuring of an object can capture its current fields. A derived expression should compute from current inputs without side effects; an effect that copies a total into another variable can introduce drift or loops. Effects also do not supply essential SSR data. Diagnose the actual read relationship instead of applying the slogan that all destructuring breaks reactivity or that every stale value needs an effect.

Make snapshot and current-read behavior visible locally

The local example captures one primitive and also creates a getter over the same ordinary object. After a change, the snapshot stays old while the getter reads the new value. This tests plain JavaScript reference semantics, not a proxy or Svelte dependency tracker. It helps describe what the consumer interface should mean. A real component still needs tests for nested mutation, parent replacement and the exact compiled call site. Do not infer that a fresh outer wrapper isolates nested mutable data; explicitly name immutable values and state owned by one operation or component subtree.

const source={total:1};
const snapshot=source.total;const current=()=>source.total;
source.total=2;
console.assert(snapshot===1 && current()===2);

Repair ownership and test the compiled interaction

Keep one owner for source state and pass narrow callback intents when another component requests a change. Use $bindable only for the deliberate public binding contract, not as a blanket way to hide ownership warnings. Reconcile canonical server results and rejected drafts separately from local interaction. In an authorized component/browser test, exercise replacement, reorder, edits and teardown with deterministic fixtures. This guide executes only the snapshot example and does not compile Svelte or reproduce a warning. Preserve that limitation and verify the actual mode, DOM output and current data instead of reporting a local getter assertion as a complete reactive fix.

Keep it from recurring

• Document state owner, prop/callback/binding contracts and current-value access. Prefer pure derivation and scoped context over duplicated state or ambient private globals. Retain reused-page and nested-reference fixtures and check exact-version warnings rather than suppressing them broadly.