How to Update an Array After Splice in Svelte?

When you use splice() to modify an array in Svelte, such as adding or removing items, simply calling the method won't trigger a UI update because Svelte relies on reactivity, which requires the array to be reassigned. This article explores two ways to ensure the array updates correctly after a splice() operation and how these changes are reflected in the UI.

These are the following approaches to update an array after splice in Svelte:

All Possible Approaches

There are two main approaches to updating an array after a splice() operation in Svelte:

• Direct Reassignment After Splice: In Svelte, reactivity is triggered when variables are reassigned. If you modify an array with splice(), Svelte won’t detect the change automatically because the array reference remains the same. To trigger reactivity, you need to reassign the array to itself.
• Using the Spread Operator: An alternative to reassigning the array is using the spread operator (...) to create a new array. Svelte detects new array instances, and this triggers reactivity automatically. By spreading the modified array into a new one, the reactivity system knows that a change has occurred.

Steps to Create the Svelte Application

Follow these steps to set up a Svelte project and implement array modification with splice():

Step 1: Create a New Svelte Project

Use degit to clone the Svelte template and create a new project:

npm create svelte@latest array_slice_svelte_demo 

OR

npx degit sveltejs/template array_slice_svelte_demo

Step 2: Navigate to project directory

cd  array_slice_svelte_demo

Step 3: Install modules

npm install

Step 4: Run the Application

Start the Svelte development server:

npm run dev

Project Structure:

Updated Dependencies:

  "devDependencies": {
    "@rollup/plugin-commonjs": "^24.0.0",
    "@rollup/plugin-node-resolve": "^15.0.0",
    "@rollup/plugin-terser": "^0.4.0",
    "rollup": "^3.15.0",
    "rollup-plugin-css-only": "^4.3.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.1.2",
    "svelte": "^3.55.0"
  },
  "dependencies": {
    "sirv-cli": "^2.0.0"
  } 

Direct Reassignment After Splice

This approach works by performing a splice operation and then reassigning the array back to the same variable to ensure reactivity. Initially, the list displays all five fruits: apple, banana, cherry, grape, orange. When you click the "Remove" button next to any fruit, it will be removed from the array, and the UI will update to reflect the change.

Syntax:

let array = ['apple', 'banana', 'cherry'];
array.splice(1, 1);  // Removes 'banana'
array = array;       // Reassigns the array to trigger reactivity

Example: In this example, after calling splice(), we reassign the fruits array to itself to notify Svelte of the change, triggering a UI update.

src/App.svelte
<script>
  let fruits = ['apple', 'banana', 'cherry', 'grape', 'orange'];

  function removeFruit(index) {
    // Splice method to remove the item at the given index
    fruits.splice(index, 1);

    // Trigger reactivity by reassigning the array
    fruits = fruits;
  }
</script>

<h2>Fruits List</h2>
<ul>
  {#each fruits as fruit, i}
    <li>{fruit} <button on:click={() => removeFruit(i)}>Remove</button></li>
  {/each}
</ul>

<p>Total fruits: {fruits.length}</p>

Output:

Using the Spread Operator

This approach uses the spread operator to create a new array after modifying it with splice(). This effectively triggers Svelte’s reactivity system. This works similarly to the first one but uses the spread operator to create a new array. Svelte detects that a new array has been assigned, and updates the UI accordingly.

Example: This example shows the use of Spread operator to update an array after splice.

src/App.svelte

<script>
  // Declare an array of fruits
  let fruits = ['apple', 'banana', 'cherry', 'grape', 'orange'];

  // Function to remove a fruit based on its index
  function removeFruit(index) {
    // Use splice to remove the fruit at the given index
    fruits.splice(index, 1);

     // Reassign array to trigger reactivity
    fruits = fruits; // Direct reassignment approach
  }
</script>

<!-- Display the list of fruits -->
<h2>Fruits List</h2>
<ul>
  {#each fruits as fruit, i}
    <li>
      {fruit}
      <!-- Button to remove a fruit from the list -->
      <button on:click={() => removeFruit(i)}>Remove</button>
    </li>
  {/each}
</ul>

<!-- Output the number of fruits -->
<p>Total fruits: {fruits.length}</p>

Output:

Conclusion

Updating an array after a splice() operation in Svelte requires triggering Svelte’s reactivity to update the component. The two approaches, direct reassignment and using the spread operator are both effective methods to ensure that the UI correctly reflects the changes in the array. By following these simple steps, you can handle array modifications in Svelte smoothly and efficiently.

Both methods ensure reactivity and result in the same output, but the spread operator approach is often preferred when working with larger or more complex applications as it explicitly creates a new array, avoiding potential side effects from mutating the original array.