From e5aa04ed491e3b85e7340967193c760e2f1c72ae Mon Sep 17 00:00:00 2001
From: Adam Rackis <arackaf@users.noreply.github.com>
Date: Sun, 6 Dec 2020 06:54:29 -0600
Subject: [PATCH] Add clarification on what makes a reactive block reactive to
 docs. (#5729)

* Add clarification on what makes a reactive block reactive to docs.

* Tweak reactive explanation
---
 site/content/docs/01-component-format.md | 26 ++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md
index 8eac5d3c50..09451701a0 100644
--- a/site/content/docs/01-component-format.md
+++ b/site/content/docs/01-component-format.md
@@ -130,6 +130,32 @@ Any top-level statement (i.e. not inside a block or a function) can be made reac
 
 ---
 
+Only values which directly appear within the `$:` block will become dependencies of the reactive statement. For example, in the code below `total` will only update when `x` changes, but not `y`.
+
+```sv
+<script>
+	let x = 0;
+	let y = 0;
+	
+	function yPlusAValue(value) {
+		return value + y;
+	}
+	
+	$: total = yPlusAValue(x);
+</script>
+
+Total: {total}
+<button on:click={() => x++}>
+	Increment X
+</button>
+
+<button on:click={() => y++}>
+	Increment Y
+</button>
+```
+
+---
+
 If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf.
 
 ```sv