Param used as state not updated on navigation

[mig-hub]

I am having a problem and wondered what is the most idiomatic way to implement this.

Basically I have a path in a [...slug] directory, and I do something slightly different depending on if there is a slug or not. When on the page, I have buttons that change things with a special transition to go from one state to another. So instead of using a basic link, I use a button which changes the params value and use goto with the replaceState option. And since I change the value of the slug param, I declare it as a $state instead of directly or with a $derived.

let itemSlug = $state( data.slug || null );

The idea here being that I want to copy the value when landing on the page, but be able to change it later. I do this often with form inputs linked to query parameters. It usually works well, provided I wrap my page with a {#key itemSlug }.

Anyway, my goto navigation works well, but when I click the main link to the page in the website's header, which is a link to the URL without a slug. The URL updates fine, but the state of the page does not revert back. Just to be clear, I know in this case it would change page WITHOUT a the special transition (apart from view-transition) but I don't mind.

Oddly enough, when replacing the $state by a $derived, it works fine. I understand why it is better for my header link, but I am surprised because on my page's buttons, like I said, I change the value of the derived value manually. I thought it was not possible to change a derived variable manually.

For simplicity sake, I could leave it since it is working. But it sounds incorrect to be able to change a derived value manually and fear it might not work in a later version of sveltekit.

Also I am aware of view-transitions which might be more practical in many situations, but here I copy an image to make it transition from a static position to a fixed position in javascript and I don't think I can achieve this with a view-transition unfortunately.

Anyway I'd like to have the opinion of somebody who's more savvy than me and let me know what is the most idiomatic way to implement what I want.

[harshagarwalnyu]

What you're observing is correct behavior, and $derived is actually the right tool here. Let me explain why.

Why $state doesn't reset on navigation

$state is initialized once when the component mounts. When you navigate to the same page (e.g., removing the slug from the URL), SvelteKit re-runs load() and updates the data prop — but it does not unmount and remount the component. Your $state keeps its last value because it was only initialized once, and navigation doesn't re-trigger initialization.

Why $derived works and is the correct pattern

let itemSlug = $derived(data.slug ?? null);

$derived re-computes whenever its dependencies change — including when data is updated by a new load() call after navigation. This is exactly the behavior you want.

The "manual assignment to $derived" question

You can assign to a $derived binding in Svelte 5 — this is an override that temporarily holds until the next time the derivation's dependency changes. When data.slug changes on the next navigation, the derived value recomputes and your manual assignment is discarded.

This is valid and intentional in Svelte 5. The RFC for runes explicitly supports this pattern. It won't be removed — it's designed to enable the "local override with sync-back" pattern you're using.

Most idiomatic approach for your case:

// Source of truth from navigation
let itemSlug = $derived(data.slug ?? null);

// Local modifications (e.g., after button clicks with goto/replaceState)
// Just reassign itemSlug directly — it's the override mechanism

If you need the {#key} pattern for transition purposes:

{#key itemSlug}
  <YourContent slug={itemSlug} />
{/key}

This remounts the inner component when itemSlug changes, which triggers your custom transition. No $state needed — $derived + {#key} is the complete idiomatic pattern here.

[mig-hub]

@harshagarwalnyu Thank you so much for taking the time to answer my questions ! I understand it better now.