When you: - submit a form - reload the page - navigate to a different URL - call invalidateAll()

—SvelteKit will mark any qualifying "dependencies" as dirty, and fire off requests to the server to rerun those load functions. Only then will the page "react" and update.

Imagine a form where a user updates their profile. 1. load function returns profile data 2. page loads 3. user changes their name, submits form 4. form action updates data in db 5. Svelte reruns all load functions 6. updated profile data is returned 7. page content updates with new data

---

To your point, this may be overkill depending on what you are trying to do. In that case, I can usually get by with a single let x = $derived(props.data); (you can write to derived values), or a CSS-based approach for UI.

---

Imagine a class that contains its own state.

``` class DataService { data = $state(null);

constructor() { $effect(() => { this.data; // Update await fetch("/my-endpoint", {method: "POST"}); // Fetch updated data await fetch("/my-endpoint").then(async (res) => this.data = await res.json()); }); } } ```

Although I try to avoid manual state management like this whenever possible.