docs: Improve example code in - When not to use $effect - section

The main change treats spent as the source of truth and derives left from it—simplifying the code, reducing the risk of inconsistencies, and improving the clarity of their relationship.

I also changed let total = 100 to const total = 100 to more clearly convey that the value is intended to remain constant.
pull/15994/head
Mithi Sevilla 4 months ago
parent 4c21f66f27
commit 49cb55cf27

@ -297,22 +297,20 @@ You might be tempted to do something convoluted with effects to link one value t
</label> </label>
``` ```
Instead, use `oninput` callbacks or — better still — [function bindings](bind#Function-bindings) where possible ([demo](/playground/untitled#H4sIAAAAAAAAE51SsW6DMBT8FcvqABINdOhCIFKXTt06lg4GHpElYyz8iECIf69tcIIipo6-u3f3fPZMJWuBpvRzkBXyTpKSy5rLq6YRbbgATdOfmeKkrMgCBt9GPpQ66RsItFjJNBzhVScRJBobmumq5wovhSxQABLskAmSk7ckOXtMKyM22ItGhhAk4Z0R0OwIN-tIQzd-90HVhvy2HsGNiQFCMltBgd7XoecV2xzXNV7XaEcth7ZfRv7kujnsTX2Qd7USb5rFjwZkJlgJwpWRcakG04cpOS9oz-QVCuoeInXW-RyEJL-sG0b7Wy6kZWM-u7CFxM5tdrIl9qg72vB74H-y7T2iXROHyVb0CLanp1yNk4D1A1jQ91hzrQSbUtIIGLcir0ylJDm9Q7urz42bX4UwIk2xH2D5Xf4A7SeMcMQCAAA=)): Instead, use `oninput` callbacks or — better still — [function bindings](bind#Function-bindings) where possible ([demo](/playground/untitled#H4sIAAAAAAAAE51Qu27DMAz8FYLo4ABu4g5d1DhAl07dOtYdFJsOBCi0YNF5wPC_F5KrJGgzdZJ0d-TpbkTWe0KFbwPXYjqGreHG8M5jjq2x5FF9jihnF0QBwDyNvDq39AeyErCt9nQPrzsWYvGocO3r3jjZVFxJ3bEXkE60hRKeiuIloJYEvCMWKOHBixbKisWFsdRGoqHeHKjJ5unHeSLKuJI25Rhco4U-ApcxHeNlAWPQVJJMEhE9prsb3qmNC8L5Zz594YdPa9ara1ReW70lG1OvDbtBILRZVthr3lGFsXF10HagcswWUG7mRPlthAn2-lSO0W-CVdw2Rtm0Smh8BvOL4X-8Q8v5Tfa7zkF0NQ6vX75ezpaiNoKpt8Z4Z_VZQWvp9DJjO-0UFMtn2t_UF8cxR6GToJJ-oOkrR9HGHg03qFptPU3fs8i37r4CAAA=)):
```svelte ```svelte
<script> <script>
let total = 100; const total = 100;
let spent = $state(0); let spent = $state(0);
let left = $state(total); let left = $derived(total - spent);
function updateSpent(value) { function updateSpent(newSpent) {
spent = value; spent = newSpent;
left = total - spent;
} }
function updateLeft(value) { function updateLeft(newLeft) {
left = value; spent = total - newLeft;
spent = total - left;
} }
</script> </script>

Loading…
Cancel
Save