Nested remote query functions in each loop freeze page when quickly refreshing query

[hrueger]

Describe the bug

Hi, I ran into a bug where my page using remote query functions would just freeze. In the dev tools I can see that ram usage is exploding. This happens when you

• have an each loop driven by a remote function
• use another remote function inside the loop's items
• Call .refresh twice quickly after each other, even though they are awaited. In my real app I'm listening to websocket events and when I receive an event or the user clicks refresh, I call query.refresh. Therefore, I can't ensure that this does not happen multiple times. Debouncing could help, but it still is a bug ;-)

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-bng3t2tw?file=src%2Froutes%2F%2Bpage.svelte

Please note that hmr is disabled in this reproduction, because otherwise we run into #15066, which has a similar outcome (page freeze).

Logs

no errors, the page just freezes.

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: ^7.0.0 => 7.0.0 
    @sveltejs/kit: ^2.49.2 => 2.49.2 
    @sveltejs/vite-plugin-svelte: ^6.2.1 => 6.2.1 
    svelte: ^5.46.0 => 5.46.0 
    vite: ^7.3.0 => 7.3.0

Severity

serious, but I can work around it

Additional Information

No response

[hrueger]

I finally managed to reproduce it as business logic. I've disabled hmr in the following repro:
https://stackblitz.com/edit/sveltejs-kit-template-default-bng3t2tw?file=src%2Froutes%2F%2Bpage.svelte

I think the key steps to reproducing it are:

• have an each loop driven by a remote function
• use another remote function inside the loop's items
• Call .refresh twice quickly after each other

The Hot Reload bug from above is still also a problem, though. If you want, I can split this into two separate issues?

[elliott-with-the-longest-name-on-github]

@hrueger can you edit the title / main post to clearly outline the issue? It seems like you've resolved / worked around something but that there's another bug you ran into along the way?

[hrueger]

Hi @elliott-with-the-longest-name-on-github,
sure, just did that. Sorry for the confusion. What happened was I ran into the issue, tried to reproduce it, managed to get the same problem with hmr, throught it was the same issue and described it. Then, I found out that it was a different issue already described in #15066, so I digged again until I could reproduce it without hmr. Now it should be clean. If you need anything else, just let me know 👍 Happy holidays

[hrueger]

Interesting. I just updated to svelte 5.46.1 (which fixes the hmr issue), now the behaviour is different: instead of a page freeze, I now get an infinite loop of POST requests to the function:

This is still not much better, though, since it never stops and also does not update the ui. Here's a fork of the original reproduction with the updated dependency: https://stackblitz.com/edit/sveltejs-kit-template-default-8msebvbe?file=package.json

[Rishab49]

This unexpected behaviour is happending because of overlapping rerendering of UI.

1. When we call 2 refresh one after another they create 2 separate setTimeout
2. First timeout makes request the backend and resolves with the data which causes the UI to rerender, which leads to batching of multiplyBy10.
3. But while it was rerendering and multiplyBy10 batch was executing from first setTimeout, the second timeout also got resolved with the new set of random numbers, causing the same rerendering and another batch of multiplyby10 to execute.
4. While first batch of multiplyBy10 finish execution and sees that the UI is again marked as dirty so it again runs the multiplyBy10 causing infinite series of requests.

kit/packages/kit/src/runtime/client/remote-functions/query.svelte.js

Lines 67 to 76 in 9e9fd2d

	setTimeout(async () => {
	const batched = batching;
	batching = new Map();
	try {
	const response = await fetch(`${base}/${app_dir}/remote/${id}`, {
	method: 'POST',
	body: JSON.stringify({
	payloads: Array.from(batched.keys())
	}),

We can solve this by adding some kind of lock in refresh function so that while one refresh for a given remote function is executing other refresh will be ignored until the current one completes.

	/** @type {boolean} */
	#isRefreshing = $state(false);

/**
	 * @returns {Promise<void> | undefined}
	 */
	refresh() {
		console.log("refreshing", this._key);
		delete remote_responses[this._key];
		if (this.#isRefreshing) return;
		this.#isRefreshing = true;
		return (this.#promise = this.#run());
	}

	this.#latest.splice(0, idx).forEach((r) => r());
	this.#error = e;
	this.#loading = false;
	reject(e);
}).finally(() => {
// adding finally block to release the lock
	console.log("done refreshing", this._key);
	this.#isRefreshing = false;
});

I tested it locally and seems to work fine. But this update will change the return type of refresh(which may not be desired).