SvelteKit goto doesn't re-render state when navigating to a page in the same directory

[Beyondo]

Describe the bug

Sveltekit does not react to goto navigations properly in a special case.

Reproduction

When I goto('/users/user-[UID_SLUG]'), it does not change the state reactively. But when I go from '/users/user-[UID_SLUG]' to /, it changes the state reactively.

The two workarounds I have are either using an anchor link with data-sveltekit-reload (non-reactive) or setting the state manually when the user clicks the anchor link which is kinda frustrating.

But what I've noticed in the 2nd workaround, is that I don't just set $currentUser = {...};, no, I actually have to do this:

$currentUser = null;
setTimeout(() => {
    $currentUser = { ... };
}, 0);

Something weird is going on and I honestly cannot figure it out.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 6.01 GB / 31.86 GB
  Binaries:
    Node: 19.5.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (119.0.2151.58)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/adapter-cloudflare: ^2.3.3 => 2.3.3
    @sveltejs/adapter-node: ^1.3.1 => 1.3.1
    @sveltejs/adapter-static: ^2.0.2 => 2.0.2
    @sveltejs/kit: ^1.20.4 => 1.22.3
    svelte: ^4.0.5 => 4.1.1
    vite: ^4.4.2 => 4.4.7

Severity

serious, but I can work around it

Additional Information

No response

[Conduitry]

Please provide a minimal reproduction in the form of a a link to a repository on GitHub, as requested in the issue template.

[eltigerchino]

https://svelte.dev/docs/kit/state-management#Component-and-page-state-is-preserved

[PH4NTOMiki]

this is really buggy, especially with Svelte 5

[mikekok]

this is really buggy, especially with Svelte 5

Exactly.
When using Svelte 4 syntax in Svelte 5, I can't get data to reload reactively withing the same route (must be some kind of bug because it works well in Svelte 4).
I had to switch to Svelte 5 syntax instead, which was actually way easier than I expected.

[OrakMoya]

Also experiencing this, though I did find a workaround that makes a bit more sense?

<script>
	let { data } = $props(); // Data returned by +page.server.js
	let currentUser = $derived(data.currentUser);
</script>

data reacts to changes returned by the server for the new route, so I added the $derived to make Svelte recalculate the currentUser.

Edit: just saw the docs link, that does exactly this. This is really counter-intuitive and not what I expect svelte to do after navigating to a new page.

I should add that this method doesnt work when the page has to change that data reactively. Instead of using $derived, I need to do this:

<script>
	let { data } = $props(); // Data returned by +page.server.js
	let currentUser = $state(data.currentUser);
	$effect(() => {
		currentUser = data.currentUser;
	});
</script>

[alanxp]

Also experiencing this, though I did find a workaround that makes a bit more sense?

<script> let { data } = $props(); // Data returned by +page.server.js let currentUser = $derived(data.currentUser); </script>

data reacts to changes returned by the server for the new route, so I added the $derived to make Svelte recalculate the currentUser.

Edit: just saw the docs link, that does exactly this. This is really counter-intuitive and not what I expect svelte to do after navigating to a new page.

I should add that this method doesnt work when the page has to change that data reactively. Instead of using $derived, I need to do this:

<script> let { data } = $props(); // Data returned by +page.server.js let currentUser = $state(data.currentUser); $effect(() => { currentUser = data.currentUser; }); </script>

yep, i can confirm that doing this is necesary, which is not ideal

[ColeyG]

Just lost a few hours to this, maybe consider documenting?

[winteryoung]

@eltigerchino This issue should be reopened. The official doc still poses a reactivity problem. With $derived, the page is able to refresh on new data from load. But lost the reactivity. I think @OrakMoya 's edited answer hit the point.

@OrakMoya It just cost me several hours. Thank you for your solution. A little different from yours, I changed $state to $derived, and this works for me:

<script lang="ts">
<script lang="ts">
  import { page } from "$app/state";
  import MonthlyBill from "$lib/components/monthly-bill/monthly-bill.svelte";

  let data = $derived(page.data);
  $effect(() => {
    data = page.data;
  });
</script>

<MonthlyBill pageData={data} />

Also experiencing this, though I did find a workaround that makes a bit more sense?

<script> let { data } = $props(); // Data returned by +page.server.js let currentUser = $derived(data.currentUser); </script>

data reacts to changes returned by the server for the new route, so I added the $derived to make Svelte recalculate the currentUser.

Edit: just saw the docs link, that does exactly this. This is really counter-intuitive and not what I expect svelte to do after navigating to a new page.

I should add that this method doesnt work when the page has to change that data reactively. Instead of using $derived, I need to do this:

<script> let { data } = $props(); // Data returned by +page.server.js let currentUser = $state(data.currentUser); $effect(() => { currentUser = data.currentUser; }); </script>

[OrakMoya]

@eltigerchino This issue should be reopened. The official doc still poses a reactivity problem. With $derived, the page is able to refresh on new data from load. But lost the reactivity. I think @OrakMoya 's edited answer hit the point.

@OrakMoya It just cost me several hours. Thank you for your solution. A little different from yours, I changed $state to $derived, and this works for me:

<script lang="ts">
  import { page } from "$app/state";
  import MonthlyBill from "$lib/components/monthly-bill/monthly-bill.svelte";

  const data = $derived(page.data);

  let apiRet = $derived(data.ret);
  $effect(() => {
    apiRet = data.ret;
  });
</script>

<MonthlyBill {apiRet} />

Also experiencing this, though I did find a workaround that makes a bit more sense?

<script> let { data } = $props(); // Data returned by +page.server.js let currentUser = $derived(data.currentUser); </script>

data reacts to changes returned by the server for the new route, so I added the $derived to make Svelte recalculate the currentUser.

Edit: just saw the docs link, that does exactly this. This is really counter-intuitive and not what I expect svelte to do after navigating to a new page.

I should add that this method doesnt work when the page has to change that data reactively. Instead of using $derived, I need to do this:

<script> let { data } = $props(); // Data returned by +page.server.js let currentUser = $state(data.currentUser); $effect(() => { currentUser = data.currentUser; }); </script>

I used $state as the page was for editing a user's profile, so I wanted parts of the page to react to the actively edited form (like the username changing both in form and in the page title)

[winteryoung]

<script lang="ts">
<script lang="ts">
  import { page } from "$app/state";
  import MonthlyBill from "$lib/components/monthly-bill/monthly-bill.svelte";

  let data = $derived(page.data);
  $effect(() => {
    data = page.data;
  });
</script>

<MonthlyBill pageData={data} />

Also, a by-product of this solution is pageData in the sub component got evaluated twice on page loading.