Array Updates in SvelteKit: Reactivity and Best Practices

In Svelte, direct manipulations of arrays using methods like push() and splice() don't trigger reactivity updates. Instead, Svelte relies on reassignment to detect changes in arrays. We'll go over why push() and splice() don't work as expected and demonstrate how to update arrays correctly using reassignment.

Why push() and splice() Don't Work

Svelte's reactivity system is based on assignment. It only detects changes when a variable is reassigned, not when the contents of an array or object are modified.

When you modify an array directly using methods like push() or splice(), the array's reference in memory doesn't change, and Svelte does not detect the update. This means the UI will not automatically re-render.

<!-- +page.svelte -->
<script lang="ts">
  let myArray = [1, 2, 3];

  function addItem() {
    myArray.push(4); // This will not trigger a reactivity update in Svelte
  }
</script>

<button on:click={addItem}>Add Item</button>

<ul>
  {#each myArray as item}
    <li>{item}</li>
  {/each}
</ul>

How to Update an Array in Svelte

Adding Items with Reassignment

Reassigning the array to a new reference ensures that Svelte detects the change and updates the UI.

The spread operator (...) is used to expand items of an array into individual elements. In this case, we're using it to create a new array that includes all the items of the original myArray plus a new item.

<!-- +page.svelte -->
<script lang="ts">
  let myArray = [1, 2, 3];

  function addItem() {
    myArray = [...myArray, 4]; // Use spread operator to create a new array
  }
</script>

<button on:click={addItem}>Add Item</button>

<ul>
  {#each myArray as item}
    <li>{item}</li>
  {/each}
</ul>

Removing Items with filter()

The filter() method creates a new array with all items that return true from the provided function. In this Svelte component, we're using filter() to create a new array that doesn't include any item with a value of 3.

<!-- +page.svelte -->
<script lang="ts">
	let myArray = [1, 2, 3, 4];

	function removeItem(value: number) {
		myArray = myArray.filter((item) => item !== value); // Create a new array without the specified value
	}
</script>

<button on:click={() => removeItem(3)}>Remove 3</button>

<ul>
	{#each myArray as item}
		<li>{item}</li>
	{/each}
</ul>

Updating Items with map()

The map() method creates a new array by applying a function to every item in the original array. This function is passed as an argument to map(), and can be used to transform / update items in the array.

<!-- +page.svelte -->
<script lang="ts">
	let myArray = [1, 2, 3];

	function doubleItems() {
		myArray = myArray.map((item) => item * 2); // Create a new array with each item doubled
	}
</script>

<button on:click={doubleItems}>Double Items</button>
<ul>
	{#each myArray as item}
		<li>{item}</li>
	{/each}
</ul>

Summary

In Svelte, to ensure reactivity when updating arrays:

• Avoid: Direct methods like push() and splice().
• Use:
  • Reassignment: Create a new array using the spread operator or other methods to ensure a new reference is assigned.
  • filter(): To remove items while creating a new array.
  • map(): To transform / update items while creating a new array.

That's it! Happy coding.