Reactive statement is executed twice when load() returns an object

[pbvahlst]

Describe the bug

When a modules load() function return an object as a result, reactive statements depending on this result is run twice in the components initializing block receiving the property from the load function. If a simple value is returned the reactive statement only runs once, as expected.

Reproduction

Bug?

This will result in the value being printed twice to the console

<script context="module">
    export  function load() {
        return {
            props: {
                value: { name: "john" } // we return an object which results in the reactive statement being executed twice
            }
        };
    }
</script>
<script>
    import { session } from "$app/stores";
    import { browser } from "$app/env";

    export let value;
    $: console.log(value);

    if (browser) {
        $session.count = 42;
    }
</script>

Expected behavior

Returning a simple value will only make the reactive statement run once

<script context="module">
    export  function load() {
        return {
            props: {
                value: 42 // we return a simple value which results in the reactive statement being executed only once
            }
        };
    }
</script>
<script>
    import { session } from "$app/stores";
    import { browser } from "$app/env";

    export let value;
    $: console.log(value);

    if (browser) {
        $session.count = 42;
    }
</script>

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900K @ 3.50GHz
    Memory: 40.12 GB / 63.86 GB
Binaries:
    Node: 16.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.39)
    Internet Explorer: 11.0.19041.1566
npmPackages:
    @sveltejs/adapter-node: ^1.0.0-next.78 => 1.0.0-next.78
    @sveltejs/kit: next => 1.0.0-next.350
    svelte: ^3.48.0 => 3.48.0

Severity

annoyance

Additional Information

No response

[PatrickG]

I can not reproduce this.
Can you create a reproduction on https://node.new/sveltekit or as a github repository?

[pbvahlst]

Sorry it needed an update of the session object which I was doing in a __template.svelte component. Here is a isolated example (I updated the code above as well):
https://stackblitz.com/edit/sveltejs-kit-template-default-iifuia?file=src/routes/index.svelte
So the problem seems to be that when updating the session the reactive statement will run again if load() returns and object but not if it returns a simple value. Notice that reactive statement doesn't have anything to do with the session being updated

[PatrickG]

The load function is running again when changing the $session, so the props gets updated.
If value is 42 the reactive statement does not trigger a rerun, because 42 === 42, so nothing changed. If value is an object, the reactive statement reruns, because {} !== {}.

But AFAIK, the load function should only rerun, if the session is used inside the load function.

Edit:
I was wrong. The load function does not rerun
https://stackblitz.com/edit/sveltejs-kit-template-default-bcrpwu

Edit II:
It seems, whenever the session store gets changed:

kit/packages/kit/src/runtime/client/client.js

Line 114 in c956744

stores.session.subscribe(async (value) => {

the client updates the layout/page props:

kit/packages/kit/src/runtime/client/client.js

Line 287 in c956744

root.$set(navigation_result.props);

Then this:

If value is 42 the reactive statement does not trigger a rerun, because 42 === 42, so nothing changed. If value is an object, the reactive statement reruns, because {} !== {}.

becomes relevant again.

I don't know if that is intended.

[pbvahlst]

good catch. I don't think it should be the intention, but if it is documentation of what/why it is happening is probably required :-)

[pbvahlst]

This seems to be a svelte problem e.g. sveltejs/svelte#5689 (and many more) so closing this issue