From 36116fc1ba8edc32b344607f4c6aa0c47d27f88d Mon Sep 17 00:00:00 2001 From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com> Date: Tue, 22 Oct 2024 07:16:17 +0800 Subject: [PATCH 1/4] docs(effect): clarify example on dynamic dependency tracking --- documentation/docs/02-runes/04-$effect.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md index eedca52d9d43..aeaa31d6b2d7 100644 --- a/documentation/docs/02-runes/04-$effect.md +++ b/documentation/docs/02-runes/04-$effect.md @@ -125,7 +125,11 @@ An effect only reruns when the object it reads changes, not when a property insi

{state.value} doubled is {derived.value}

``` -An effect only depends on the values that it read the last time it ran. If `a` is true, changes to `b` will [not cause this effect to rerun](/playground/untitled#H4sIAAAAAAAAE3WQ0WrDMAxFf0U1hTow1vcsMfQ7lj3YjlxEXTvEymC4_vfFC6Ewtidxde8RkrJw5DGJ9j2LoO8oWnGZJvEi-GuqIn2iZ1x1istsa6dLdqaJ1RAG9sigoYdjYs0onfYJm7fdMX85q3dE59CylA30CnJtDWxjSNHjq49XeZqXEChcT9usLUAOpIbHA0yzM78oColGhDVofLS3neZSS6mqOz-XD51ZmGOAGKwne-vztk-956CL0kAJsi7decupf4l658EUZX4I8yTWt93jSI5wFC3PC5aP8g0Aje5DcQEAAA==): +An effect only depends on the values that it read the last time it ran. This implementation detail has interesting implications for effects that have conditional short-circuiting code. + +For instance, if `a` is `false` in the code snippet below, the `a || b` operation will proceed to read `a` and _then_ `b`. This double read causes the effect to depend on both `a` and `b`, which in turn causes the effect to rerun whenever any of `a` or `b` change. + +On the other hand, if `a` is `true`, changes to `b` will [not cause this effect to rerun](/#H4sIAAAAAAAAE3WQ0WrDMAxFf0U1hTow1vcsMfQ7lj3YjlxEXTvEymC4_vfFC6Ewtidxde8RkrJw5DGJ9j2LoO8oWnGZJvEi-GuqIn2iZ1x1istsa6dLdqaJ1RAG9sigoYdjYs0onfYJm7fdMX85q3dE59CylA30CnJtDWxjSNHjq49XeZqXEChcT9usLUAOpIbHA0yzM78oColGhDVofLS3neZSS6mqOz-XD51ZmGOAGKwne-vztk-956CL0kAJsi7decupf4l658EUZX4I8yTWt93jSI5wFC3PC5aP8g0Aje5DcQEAAA==) because the `a || b` operation _exits early_ as soon as it encounters the first truthy operand. By exiting early, the effect will have only read `a`, which causes the effect to _only_ depend on `a`, not `b`. ```ts let a = false; From f6163c113ae83d09f1f991f4dfe783c5298bf904 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 8 Jan 2025 14:24:45 -0500 Subject: [PATCH 2/4] use an if block, it's clearer --- documentation/docs/02-runes/04-$effect.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md index aeaa31d6b2d7..334da2001339 100644 --- a/documentation/docs/02-runes/04-$effect.md +++ b/documentation/docs/02-runes/04-$effect.md @@ -125,11 +125,11 @@ An effect only reruns when the object it reads changes, not when a property insi

{state.value} doubled is {derived.value}

``` -An effect only depends on the values that it read the last time it ran. This implementation detail has interesting implications for effects that have conditional short-circuiting code. +An effect only depends on the values that it read the last time it ran. This has interesting implications for effects that have conditional code. -For instance, if `a` is `false` in the code snippet below, the `a || b` operation will proceed to read `a` and _then_ `b`. This double read causes the effect to depend on both `a` and `b`, which in turn causes the effect to rerun whenever any of `a` or `b` change. +For instance, if `a` is `true` in the code snippet below, the code inside the `if` block will run and `b` will be evaluated. As such, changes to either `a` or `b` [will cause the effect to re-run](/#H4sIAAAAAAAAE3WQTWrDMBCFrzIRAcsQkr1rC3KIruouJHUURNWxscalRejuleqEQElXQu99b_6SIP2BohPPxJ4DvomDcD5gFN1LEvw9V68KRb-S53k-xk8MXDWjIz7S7USMxKWM6KNd_MxqpLE0YNAwwD6yZpROh4jt080xj5zi7dE5tCxlC4OCVKWRS4c4BTyG6SKbZSXydGm2WhvgHUjd3vA_AdM1BzBXnHN9cv31p_u01JuVeSKYyAZv34e0DVAX2OmsNPgISef-tHHq30RdbGeyMr8Jc0-USzF-seh4WTG_5h_LyPoejwEAAA==). -On the other hand, if `a` is `true`, changes to `b` will [not cause this effect to rerun](/#H4sIAAAAAAAAE3WQ0WrDMAxFf0U1hTow1vcsMfQ7lj3YjlxEXTvEymC4_vfFC6Ewtidxde8RkrJw5DGJ9j2LoO8oWnGZJvEi-GuqIn2iZ1x1istsa6dLdqaJ1RAG9sigoYdjYs0onfYJm7fdMX85q3dE59CylA30CnJtDWxjSNHjq49XeZqXEChcT9usLUAOpIbHA0yzM78oColGhDVofLS3neZSS6mqOz-XD51ZmGOAGKwne-vztk-956CL0kAJsi7decupf4l658EUZX4I8yTWt93jSI5wFC3PC5aP8g0Aje5DcQEAAA==) because the `a || b` operation _exits early_ as soon as it encounters the first truthy operand. By exiting early, the effect will have only read `a`, which causes the effect to _only_ depend on `a`, not `b`. +Conversely, if `a` is `false`, `b` will not be evaluated, and the effect will _only_ re-run when `a` changes. ```ts let a = false; @@ -138,8 +138,8 @@ let b = false; $effect(() => { console.log('running'); - if (a || b) { - console.log('inside if block'); + if (a) { + console.log('b:', b); } }); ``` From bbfcece755a4bb4f1c08121237faa37c86b2ae29 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 8 Jan 2025 14:30:40 -0500 Subject: [PATCH 3/4] fix --- documentation/docs/02-runes/04-$effect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md index 334da2001339..0bb89dd8685a 100644 --- a/documentation/docs/02-runes/04-$effect.md +++ b/documentation/docs/02-runes/04-$effect.md @@ -127,7 +127,7 @@ An effect only reruns when the object it reads changes, not when a property insi An effect only depends on the values that it read the last time it ran. This has interesting implications for effects that have conditional code. -For instance, if `a` is `true` in the code snippet below, the code inside the `if` block will run and `b` will be evaluated. As such, changes to either `a` or `b` [will cause the effect to re-run](/#H4sIAAAAAAAAE3WQTWrDMBCFrzIRAcsQkr1rC3KIruouJHUURNWxscalRejuleqEQElXQu99b_6SIP2BohPPxJ4DvomDcD5gFN1LEvw9V68KRb-S53k-xk8MXDWjIz7S7USMxKWM6KNd_MxqpLE0YNAwwD6yZpROh4jt080xj5zi7dE5tCxlC4OCVKWRS4c4BTyG6SKbZSXydGm2WhvgHUjd3vA_AdM1BzBXnHN9cv31p_u01JuVeSKYyAZv34e0DVAX2OmsNPgISef-tHHq30RdbGeyMr8Jc0-USzF-seh4WTG_5h_LyPoejwEAAA==). +For instance, if `a` is `true` in the code snippet below, the code inside the `if` block will run and `b` will be evaluated. As such, changes to either `a` or `b` [will cause the effect to re-run](/playground/untitled#H4sIAAAAAAAAE3WQTWrDMBCFrzIRAcsQkr1rC3KIruouJHUURNWxscalRejuleqEQElXQu99b_6SIP2BohPPxJ4DvomDcD5gFN1LEvw9V68KRb-S53k-xk8MXDWjIz7S7USMxKWM6KNd_MxqpLE0YNAwwD6yZpROh4jt080xj5zi7dE5tCxlC4OCVKWRS4c4BTyG6SKbZSXydGm2WhvgHUjd3vA_AdM1BzBXnHN9cv31p_u01JuVeSKYyAZv34e0DVAX2OmsNPgISef-tHHq30RdbGeyMr8Jc0-USzF-seh4WTG_5h_LyPoejwEAAA==). Conversely, if `a` is `false`, `b` will not be evaluated, and the effect will _only_ re-run when `a` changes. From 1ff05a3edadf22c7707a79755e6e9291fcf322af Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 8 Jan 2025 14:37:07 -0500 Subject: [PATCH 4/4] toggle --- documentation/docs/02-runes/04-$effect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md index 920a241c07ce..1ea960de70fc 100644 --- a/documentation/docs/02-runes/04-$effect.md +++ b/documentation/docs/02-runes/04-$effect.md @@ -127,7 +127,7 @@ An effect only reruns when the object it reads changes, not when a property insi An effect only depends on the values that it read the last time it ran. This has interesting implications for effects that have conditional code. -For instance, if `a` is `true` in the code snippet below, the code inside the `if` block will run and `b` will be evaluated. As such, changes to either `a` or `b` [will cause the effect to re-run](/playground/untitled#H4sIAAAAAAAAE3WQTWrDMBCFrzIRAcsQkr1rC3KIruouJHUURNWxscalRejuleqEQElXQu99b_6SIP2BohPPxJ4DvomDcD5gFN1LEvw9V68KRb-S53k-xk8MXDWjIz7S7USMxKWM6KNd_MxqpLE0YNAwwD6yZpROh4jt080xj5zi7dE5tCxlC4OCVKWRS4c4BTyG6SKbZSXydGm2WhvgHUjd3vA_AdM1BzBXnHN9cv31p_u01JuVeSKYyAZv34e0DVAX2OmsNPgISef-tHHq30RdbGeyMr8Jc0-USzF-seh4WTG_5h_LyPoejwEAAA==). +For instance, if `a` is `true` in the code snippet below, the code inside the `if` block will run and `b` will be evaluated. As such, changes to either `a` or `b` [will cause the effect to re-run](/playground/untitled#H4sIAAAAAAAAE3VQzWrDMAx-FdUU4kBp71li6EPstOxge0ox8-QQK2PD-N1nLy2F0Z2Evj9_chKkP1B04pnYscc3cRCT8xhF95IEf8-Vq0DBr8rzPB_jJ3qumNERH-E2ECNxiRF9tIubWY00lgcYNAywj6wZJS8rtk83wjwgCrXHaULLUrYwKEgVGrnkx-Dx6MNFNstK5OjSbFGbwE0gdXuT_zGYrjmAuco515Hr1p_uXak3K3MgCGS9s-9D2grU-judlQYXIencnzad-tdR79qZrMyvw9wd5Z8Yv1h09dz8mn8AkM7Pfo0BAAA=). Conversely, if `a` is `false`, `b` will not be evaluated, and the effect will _only_ re-run when `a` changes.