Navigating from /a to /b in route /[route] reruns +page.ts but +page.svelte is unchanged

[ianengelbrecht]

Describe the bug

If I have a route like /[slug], and I go to /a, the page load function picks up 'a' from params, does what it needs and passes the data down to +page.svelte as expected. Then if I then navigate from /a to /b, the page load function reruns, provides new data down to +page.svelte, but the ui does not update. I can't find anything in the docs to describe what to do to get the ui to update with the new data.

Reproduction

https://github.com/ianengelbrecht/sveltekit-pagenavs

Logs

NA

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 13th Gen Intel(R) Core(TM) i5-1345U
    Memory: 16.37 GB / 31.66 GB
  Binaries:
    Node: 22.13.1 - C:\nvm4w\nodejs\node.EXE
    npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (129.0.2792.89)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte: ^5.0.0 => 5.29.0

Severity

annoyance

[Conduitry]

Switching to another page that's rendered by the same component updates the props passed to that component - it doesn't re-render the whole component. const { stage } = data; isn't reactive when data changes. You can use $derived() to handle these changes.

[ianengelbrecht]

I've added a derived variable as I've understood your suggestion, but the ui still doesn't update. Example repo updated with this change.

[ianengelbrecht]

Just to elaborate, my understanding is that derived variables must be based on reactive ($state()) variables, and since the values passed down from the pageLoad are not reactive we cannot use them for $derived.

[7nik]

It should be like this:

  const { data } = $props();
- const { stage } = data;
+ const { stage } = $derived(data);

Also, it should be noted that stage, in case it's an object, isn't deeply reactive.

[ianengelbrecht]

Okay thank you, that works. It's very nuanced though, and I think it should be documented specifically somewhere at https://svelte.dev/docs/kit/load#Page-data

…

On Thu, May 15, 2025 at 11:40 AM 7nik ***@***.***> wrote: *7nik* left a comment (sveltejs/svelte#15918) <#15918 (comment)> It should be like this: const { data } = $props();- const { stage } = data;+ const { stage } = $derived(data); Also, it should be noted that stage, in case it's an object, isn't deeply reactive. — Reply to this email directly, view it on GitHub <#15918 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACH3QI2FQWBZ5ZCOKX2N4JD26ROIFAVCNFSM6AAAAAB5EKL5MKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQOBTGE4TSNZSHE> . You are receiving this because you authored the thread.Message ID: ***@***.***>