From 6238f9edb476454e1d43d357854dda1b8d76359f Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 7 Sep 2025 10:24:27 +0200 Subject: [PATCH 1/3] Clarify array appending methods in stores --- src/routes/concepts/stores.mdx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/routes/concepts/stores.mdx b/src/routes/concepts/stores.mdx index 14041cf1e..bd448cb66 100644 --- a/src/routes/concepts/stores.mdx +++ b/src/routes/concepts/stores.mdx @@ -253,8 +253,9 @@ 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 existing elements and adding the new element, replacing the entire `store.users` array. This triggers reactivity for all effects tracking the array or its properties. ```jsx setStore("users", (otherUsers) => [ @@ -266,9 +267,11 @@ setStore("users", (otherUsers) => [ loggedIn: false, }, ]) +``` -// can become +The path syntax appends the new element by setting it at the index equal to `store.users.length`, modifying the existing array. This triggers reactivity only for effects tracking the new index or properties like `store.users.length`, making it more efficient for targeted updates. +```jsx setStore("users", store.users.length, { id: 3, username: "michael584", From 5d87ce0eae84169da478fc547b96cac3fbc62f3a Mon Sep 17 00:00:00 2001 From: Thomas Date: Mon, 8 Sep 2025 07:14:34 +0200 Subject: [PATCH 2/3] Update src/routes/concepts/stores.mdx Co-authored-by: Sarah --- src/routes/concepts/stores.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/concepts/stores.mdx b/src/routes/concepts/stores.mdx index bd448cb66..71eb8f3d8 100644 --- a/src/routes/concepts/stores.mdx +++ b/src/routes/concepts/stores.mdx @@ -255,7 +255,8 @@ Instead of relying on discovering individual indices, path syntax introduces sev 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 existing elements and adding the new element, replacing the entire `store.users` array. This triggers reactivity for all effects tracking the array or its properties. +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) => [ From 8f9ee82d8162f6335fb11f911c615fa060375737 Mon Sep 17 00:00:00 2001 From: Thomas Date: Mon, 8 Sep 2025 07:15:00 +0200 Subject: [PATCH 3/3] Update src/routes/concepts/stores.mdx Co-authored-by: Sarah --- src/routes/concepts/stores.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/concepts/stores.mdx b/src/routes/concepts/stores.mdx index 71eb8f3d8..36e30a01d 100644 --- a/src/routes/concepts/stores.mdx +++ b/src/routes/concepts/stores.mdx @@ -270,7 +270,8 @@ setStore("users", (otherUsers) => [ ]) ``` -The path syntax appends the new element by setting it at the index equal to `store.users.length`, modifying the existing array. This triggers reactivity only for effects tracking the new index or properties like `store.users.length`, making it more efficient for targeted updates. +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, {