In Svelte, both reactive declarations and derived values are ways to automatically update data when other variables change. However, they serve slightly different purposes.
A reactive declaration uses the $: syntax to run a statement whenever any of its dependencies change. It can be used for calculations, logging, or even executing side effects.
Here, the console.log statement will re-run every time count changes. Reactive declarations are not limited to assignments; they can perform any action.
A derived value is a specific type of reactive declaration that calculates a new value based on other variables. It’s useful when you want to keep a computed variable in sync automatically.
Here, double is always recalculated whenever count changes. You don't need to update double manually — Svelte tracks it automatically.
Reactive Declaration (
$:): Runs a block of code or statement whenever its dependencies change. It can contain logic, API calls, or side effects.Derived Value: A special case of reactive declaration where a new variable is assigned a value based on other variables.
In short, all derived values are reactive declarations, but not all reactive declarations are derived values. Use derived values for computed variables and reactive declarations for more complex logic or side effects.