Invalidation and reloading in Svelte - Mini Project: Build & Apply

Svelte Invalidation and Reloading Demo

📖 Scenario: You are building a simple Svelte app that shows a list of tasks. You want to practice how to reload or refresh the data when something changes, using Svelte's invalidation and reactive features.

🎯 Goal: Build a Svelte component that displays a list of tasks, has a button to add a new task, and automatically reloads the task list when a new task is added by invalidating the data.

📋 What You'll Learn

Create a tasks array with initial tasks

Add a newTask string variable for input

Use a reactive statement to reload tasks when newTask changes

Add a button that adds newTask to tasks and clears newTask

💡 Why This Matters

🌍 Real World

Many apps need to reload or refresh data when users add or change items. This project shows how Svelte handles such updates reactively.

💼 Career

Understanding invalidation and reloading in Svelte is key for building dynamic, responsive web apps that update smoothly without full page reloads.

1

Setup initial tasks array

Create a tasks array with these exact strings: 'Buy groceries', 'Walk the dog', and 'Read a book'.

Svelte

# Create a tasks array with three tasks

// Your code here

Hint

Use let tasks = ['Buy groceries', 'Walk the dog', 'Read a book'];

2

Add newTask variable for input

Add a newTask variable and set it to an empty string ''.

Svelte

let tasks = ['Buy groceries', 'Walk the dog', 'Read a book'];

// Add a newTask variable initialized to empty string

// Your code here

Hint

Use let newTask = ''; to create the input variable.

3

Add reactive statement to reload tasks

Add a reactive statement using $: that logs 'Reloading tasks' to the console whenever newTask changes.

Svelte

let tasks = ['Buy groceries', 'Walk the dog', 'Read a book'];
let newTask = '';

// Add reactive statement to log when newTask changes

// Your code here

Hint

Use $: if (newTask) { console.log('Reloading tasks'); } to react to changes.

4

Add button to add new task and clear input

Add a function called addTask that pushes newTask into tasks array and then sets newTask to an empty string ''. Then add a button element with on:click={addTask} that says Add Task.

Svelte

let tasks = ['Buy groceries', 'Walk the dog', 'Read a book'];
let newTask = '';

$: if (newTask) {
    console.log('Reloading tasks');
}

// Add addTask function and button with on:click

// Your code here

Hint

Define addTask to update tasks and clear newTask. Add a button with on:click={addTask}.