From 63f592e7133bbb5730ceb61ca8184854fed52edb Mon Sep 17 00:00:00 2001
From: Stephane <stephane-vanraes@users.noreply.github.com>
Date: Fri, 23 Jul 2021 22:21:37 +0200
Subject: [PATCH] [docs] Add clarification about reactivity and arrays (#6547)

---
 site/content/docs/01-component-format.md | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md
index 0d8cc6a43e..546715eb56 100644
--- a/site/content/docs/01-component-format.md
+++ b/site/content/docs/01-component-format.md
@@ -95,8 +95,6 @@ To change component state and trigger a re-render, just assign to a locally decl
 
 Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect.
 
-Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. Options for getting around this can be found in the [tutorial](tutorial/updating-arrays-and-objects).
-
 ```sv
 <script>
 	let count = 0;
@@ -109,6 +107,24 @@ Because Svelte's reactivity is based on assignments, using array methods like `.
 </script>
 ```
 
+---
+
+Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to trigger the update. This and more details can also be found in the [tutorial](tutorial/updating-arrays-and-objects).
+
+```sv
+<script>
+	let arr = [0, 1];
+
+	function handleClick () {
+		// this method call does not trigger an update
+		arr.push(2);
+		// this assignment will trigger an update
+		// if the markup references `arr`
+		arr = arr
+	}
+</script>
+```
+
 #### 3. `$:` marks a statement as reactive
 
 ---