From 213258b0240ea46d184efd5a274579642688395a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 22 Aug 2024 03:58:45 -0400
Subject: [PATCH] docs: add note on when effects re-run (#12961)

closes #11806

---------

Co-authored-by: Conduitry <git@chor.date>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 documentation/docs/03-runes/02-side-effects.md    | 15 +++++++++++++++
 .../src/routes/docs/content/01-api/02-runes.md    | 15 +++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/documentation/docs/03-runes/02-side-effects.md b/documentation/docs/03-runes/02-side-effects.md
index 9cc0f15beb..f4bc8ef947 100644
--- a/documentation/docs/03-runes/02-side-effects.md
+++ b/documentation/docs/03-runes/02-side-effects.md
@@ -122,6 +122,21 @@ An effect only reruns when the object it reads changes, not when a property insi
 <p>{state.value} doubled is {derived.value}</p>
 ```
 
+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](/#H4sIAAAAAAAAE3WQ0WrDMAxFf0U1hTow1vcsMfQ7lj3YjlxEXTvEymC4_vfFC6Ewtidxde8RkrJw5DGJ9j2LoO8oWnGZJvEi-GuqIn2iZ1x1istsa6dLdqaJ1RAG9sigoYdjYs0onfYJm7fdMX85q3dE59CylA30CnJtDWxjSNHjq49XeZqXEChcT9usLUAOpIbHA0yzM78oColGhDVofLS3neZSS6mqOz-XD51ZmGOAGKwne-vztk-956CL0kAJsi7decupf4l658EUZX4I8yTWt93jSI5wFC3PC5aP8g0Aje5DcQEAAA==):
+
+```ts
+let a = false;
+let b = false;
+// ---cut---
+$effect(() => {
+	console.log('running');
+
+	if (a || b) {
+		console.log('inside if block');
+	}
+});
+```
+
 ## When not to use `$effect`
 
 In general, `$effect` is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead of this...
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 02cea6ffb4..84062a1cfa 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -258,6 +258,21 @@ An effect only reruns when the object it reads changes, not when a property insi
 <p>{state.value} doubled is {derived.value}</p>
 ```
 
+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](/#H4sIAAAAAAAAE3WQ0WrDMAxFf0U1hTow1vcsMfQ7lj3YjlxEXTvEymC4_vfFC6Ewtidxde8RkrJw5DGJ9j2LoO8oWnGZJvEi-GuqIn2iZ1x1istsa6dLdqaJ1RAG9sigoYdjYs0onfYJm7fdMX85q3dE59CylA30CnJtDWxjSNHjq49XeZqXEChcT9usLUAOpIbHA0yzM78oColGhDVofLS3neZSS6mqOz-XD51ZmGOAGKwne-vztk-956CL0kAJsi7decupf4l658EUZX4I8yTWt93jSI5wFC3PC5aP8g0Aje5DcQEAAA==):
+
+```ts
+let a = false;
+let b = false;
+// ---cut---
+$effect(() => {
+	console.log('running');
+
+	if (a || b) {
+		console.log('inside if block');
+	}
+});
+```
+
 You can return a function from `$effect`, which will run immediately before the effect re-runs, and before it is destroyed ([demo](/#H4sIAAAAAAAAE42SzW6DMBCEX2Vl5RDaVCQ9JoDUY--9lUox9lKsGBvZC1GEePcaKPnpqSe86_m0M2t6ViqNnu0_e2Z4jWzP3pqGbRhdmrHwHWrCUHvbOjF2Ei-caijLTU4aCYRtDUEKK0-ccL2NDstNrbRWHoU10t8Eu-121gTVCssSBa3XEaQZ9GMrpziGj0p5OAccCgSHwmEgJZwrNNihg6MyhK7j-gii4uYb_YyGUZ5guQwzPdL7b_U4ZNSOvp9T2B3m1rB5cLx4zMkhtc7AHz7YVCVwEFzrgosTBMuNs52SKDegaPbvWnMH8AhUXaNUIY6-hHCldQhUIcyLCFlfAuHvkCKaYk8iYevGGgy2wyyJnpy9oLwG0sjdNe2yhGhJN32HsUzi2xOapNpl_bSLIYnDeeoVLZE1YI3QSpzSfo7-8J5PKbwOmdf2jC6JZyD7HxpPaMk93aHhF6utVKVCyfbkWhy-hh9Z3o_2nQIAAA==)).
 
 ```svelte