Updating props using derived states
In an attempt to synchronize the value prop with changes to the input bound to triple, one might be tempted to add another reactive declaration. This declaration would update the value prop to be one-third of triple whenever triple changes. Here is the proposed modification:
<script>
export let value;
$: double = value * 2;
$: triple = value * 3;
$: value = double / 2;
$: value = triple / 3;
</script>
<input bind:value={double} type="number" />
<input bind:value={triple} type="number" /> As we discussed earlier, it’s best practice to maintain a one-way data flow for derived states to simplify debugging and data management. Indeed, the Svelte compiler flags the preceding code snippet for cyclical dependencies. This is because double is derived from value, and value is in turn dependent on double.
However, Svelte’s compiler...
