[docs] Add clarification on how reactivity works (#7819)

* Add clarification on how reactivity works

Based on the fact that there are multiple issues were opened related to a perceived bug on the reactive variables, I thought it would be good to add a clarification on the docs. Part of the text is taken from [this comment](https://github.com/sveltejs/svelte/issues/7818#issuecomment-1230374639) that I found super useful.

* Reword based on PR comments

site/content/docs/02-component-format.md

@@ -192,6 +192,25 @@ Total: {total}
 </button>
 ```
 
+---
+It is important to note that the reactive blocks are ordered via simple static analysis at compile time, and all the compiler looks at are the variables that are assigned to and used within the block itself, not in any functions called by them. This means that `yDependent` will not be updated when `x` is updated in the following example:
+
+```sv
+<script>
+	let x = 0;
+	let y = 0;
+	
+	const setY = (value) => {
+		y = value;
+	}
+	
+	$: yDependent = y;
+	$: setY(x);
+</script>
+```
+
+Moving the line `$: yDependent = y` bellow `$: setY(x)` will cause `yDependent` to be updated when `x` is updated.
+
 ---
 
 If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf.