Async, Streaming with Promises & Infinite Loop

[fmorency]

Describe the bug

The console gets spammed by Tick updated at: messages. More than it should.

Note that I don't see this issue if I rename +page.server.ts to +page.ts.

Unclear to me if I'm doing something I shouldn't or if this is a real issue. Please be gentle.

Reproduction

+page.server.ts

export const load = async ({fetch}) => {
  const res = await fetch('https://pokeapi.co/api/v2/pokemon/pikachu');
  return {data: res.json()}
}

+page.svelte

<script lang="ts">

import type {PageProps} from "./$types";
import {readable} from "svelte/store";
import {invalidateAll} from "$app/navigation";

const {data}: PageProps = $props();

const tick = readable(Date.now(), (set) => {
  const id = setInterval(() => set(Date.now()), 1000);
  return () => clearInterval(id);
});

$effect(() => {
  if ($tick) {
    console.log("Tick updated at:", $tick);
    invalidateAll();
  }
});

</script>

<main>
  <svelte:boundary>
    <p>{JSON.stringify((await data.data), null, 2)}</p>

    {#snippet pending()}
      <p>loading...</p>
    {/snippet}
  </svelte:boundary>
</main>

Logs

Tick updated at: 1752693977687 +page.svelte:16:13
Tick updated at: 1752693977687 +page.svelte:16:13
Tick updated at: 1752693977687 +page.svelte:16:13
Tick updated at: 1752693978697 +page.svelte:16:13
Tick updated at: 1752693978697 +page.svelte:16:13
Tick updated at: 1752693978697 +page.svelte:16:13
Tick updated at: 1752693978697 +page.svelte:16:13
Tick updated at: 1752693978697 +page.svelte:16:13
Tick updated at: 1752693978697 +page.svelte:16:13
Tick updated at: 1752693978697 +page.svelte:16:13
Tick updated at: 1752693978697 +page.svelte:16:13
Tick updated at: 1752693978697 +page.svelte:16:13
Tick updated at: 1752693978697 +page.svelte:16:13
Tick updated at: 1752693978697 +page.svelte:16:13
Tick updated at: 1752693978697 +page.svelte:16:13

System Info

System:
    OS: Linux 6.15 Manjaro Linux
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 10.87 GB / 39.02 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.17.0 - ~/.nvm/versions/node/v22.17.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.9.0/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.17.0/bin/npm
    pnpm: 9.10.0 - ~/.nvm/versions/node/v20.9.0/bin/pnpm
    bun: 1.2.18 - /usr/bin/bun
  Browsers:
    Chromium: 138.0.7204.92
  npmPackages:
    svelte: 5.36.4 => 5.36.4

Severity

annoyance

[rmunn]

Haven't dived into this with any depth at all so this may be completely wrong, but what happens if you replace the invalidateAll() call with untrack(() => invalidateAll()) in that $effect?

[fmorency]

Haven't dived into this with any depth at all so this may be completely wrong, but what happens if you replace the invalidateAll() call with untrack(() => invalidateAll()) in that $effect?

I'm getting the same issue.

[dummdidumm]

Minimum reproducible:

<script lang="ts">
let data = $state(Promise.resolve(Math.random()));

let tick = $state(Date.now());
$effect(() => {
	const x = setInterval(() => {
		tick = Date.now();
	}, 1000);
	return () => clearInterval(x);
})

$effect(() => {
	if (tick) {
		console.log("Tick updated at:", tick);
		data = Promise.resolve(Math.random())
  }
});

</script>

<main>
  <svelte:boundary>
    <p>{JSON.stringify((await data), null, 2)}</p>

    {#snippet pending()}
      <p>loading...</p>
    {/snippet}
  </svelte:boundary>
</main>

This happens because batch.decrement() executes all effects, whether or not they are actually dirty.