Skip to content

pushState() breaks when called from inside $effect() #13794

Closed
@echocrow

Description

@echocrow

Describe the bug

Calling pushState() inside of $effect() seems to cause an infinite loop, re-invoking the same $effect() over and over again.

(Not sure if this is a bug in Svelte or SvelteKit.)

Reproduction

Repro on StackBlitz

TL;DR:

let count = $state(0)

$effect(() => {
	console.log('effect', {count})
	if (count) pushState('', {count})
})

(once count is truthy, pushState() is called, the bug starts)

Logs

+page.svelte:8 effect {count: 1}
+page.svelte:8 effect {count: 1}
+page.svelte:8 effect {count: 1}
+page.svelte:8 effect {count: 1}
+page.svelte:8 effect {count: 1}
...

System Info

System:
  OS: Linux 5.0 undefined
  CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 0 Bytes / 0 Bytes
  Shell: 1.0 - /bin/jsh
Binaries:
  Node: 20.19.1 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 10.8.2 - /usr/local/bin/npm
  pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
  @sveltejs/adapter-auto: ^6.0.0 => 6.0.1 
  @sveltejs/kit: ^2.16.0 => 2.21.0 
  @sveltejs/vite-plugin-svelte: ^5.0.0 => 5.0.3 
  svelte: ^5.25.0 => 5.30.1 
  vite: ^6.2.6 => 6.3.5

Severity

serious, but I can work around it

Additional Information

possible workarounds:

untrack(() => pushState('', {count}))
// or
setTimeout(() => pushState('', {count}))

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions