Skip to content

Addresses Issue #1183 #1252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 8, 2025
Merged

Addresses Issue #1183 #1252

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6238f9e
Clarify array appending methods in stores
thomasbuilds Sep 7, 2025
5d87ce0
Update src/routes/concepts/stores.mdx
thomasbuilds Sep 8, 2025
8f9ee82
Update src/routes/concepts/stores.mdx
thomasbuilds Sep 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/routes/concepts/stores.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,8 +253,10 @@ Instead of relying on discovering individual indices, path syntax introduces sev

### Appending new values

To append new values to an array in a store, use the setter function with the spread operator (`...`) to create a new array that includes the existing items and the new ones.
For appending a single element, you can instead leverage the "path syntax" by specifying the array’s length as the index to set.
To append values to an array in a store, use the setter function with the spread operator (`...`) or the path syntax. Both methods add an element to the array but differ in how they modify it and their reactivity behavior.

The spread operator creates a new array by copying the existing elements and adding the new one, effectively replacing the entire `store.users` array.
This replacement triggers reactivity for all effects that depend on the array or its properties.

```jsx
setStore("users", (otherUsers) => [
Expand All @@ -266,9 +268,12 @@ setStore("users", (otherUsers) => [
loggedIn: false,
},
])
```

// can become
The path syntax adds the new element by assigning it to the index equal to `store.users.length`, directly modifying the existing array.
This triggers reactivity only for effects that depend on the new index or properties like `store.users.length`, making updates more efficient and targeted.

```jsx
setStore("users", store.users.length, {
id: 3,
username: "michael584",
Expand Down