Skip to content

Commit 63f592e

Browse files
[docs] Add clarification about reactivity and arrays (sveltejs#6547)
1 parent 3b97329 commit 63f592e

File tree

1 file changed

+18
-2
lines changed

1 file changed

+18
-2
lines changed

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

+18-2
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,6 @@ To change component state and trigger a re-render, just assign to a locally decl
9595

9696
Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect.
9797

98-
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).
99-
10098
```sv
10199
<script>
102100
let count = 0;
@@ -109,6 +107,24 @@ Because Svelte's reactivity is based on assignments, using array methods like `.
109107
</script>
110108
```
111109

110+
---
111+
112+
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).
113+
114+
```sv
115+
<script>
116+
let arr = [0, 1];
117+
118+
function handleClick () {
119+
// this method call does not trigger an update
120+
arr.push(2);
121+
// this assignment will trigger an update
122+
// if the markup references `arr`
123+
arr = arr
124+
}
125+
</script>
126+
```
127+
112128
#### 3. `$:` marks a statement as reactive
113129

114130
---

0 commit comments

Comments
 (0)