sveltejs / sveltejs/kit

Spamming mutations can cause issues with withOverride

Open
#14,669 5 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

forms
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

I'm running into a strange issue with the withOverride function.
After submitting the form, it looks like the old object state is still being used instead of the updated one.
The behavior is inconsistent — sometimes the list updates as expected, and sometimes it seems to reuse the previous state.
It only happens on my computer, not on SvelteLab.

https://github.com/user-attachments/assets/e5f8d935-0a40-411f-8727-55d43bc37e8b

Reproduction

Here’s the repo:
https://github.com/timootten/SvelteKit-Remotefunctions/blob/main/src/routes/todos/todos.svelte

It’s strange because the exact same repo doesn’t reproduce the bug on SvelteLab:
https://www.sveltelab.dev/?provider=github&owner=timootten&repo=SvelteKit-Remotefunctions

<script lang="ts">
	import { createTodo, deleteTodo, getTodos } from './todos.remote';

	const todos = $derived(await getTodos());
</script>

<form
	{...createTodo.enhance(async ({ form, data, submit }) => {
		try {
			form.reset();
			await submit().updates(
				getTodos().withOverride((todos) => [
					...todos,
					{
						id: Math.random().toString(36).substring(2, 9),
						title: data.title,
						checked: false
					}
				])
			);

			console.log('Todo created');
		} catch (error) {
			console.error('Failed to create todo', error);
		}
	})}
>
	<input {...createTodo.fields.title.as('text')} placeholder="Todo" required />
	<button type="submit">Add Todo</button>
</form>

<ul>
	{#each todos as todo}
		<li>
			{todo.title}
			<form {...deleteTodo.for(todo.id)}>
				<button type="submit">Delete</button>
			</form>
		</li>
	{/each}
</ul>
Logs

System Info
System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 5700X 8-Core Processor
    Memory: 16.68 GB / 31.91 GB
  Binaries:
    Node: 22.2.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.3.0 - C:\Users\timoo\.bun\bin\pnpm.EXE
    bun: 1.2.23 - C:\Users\timoo\AppData\Local\pnpm\bun.CMD
    Deno: 2.3.3 - C:\Users\timoo\.deno\bin\deno.EXE
  Browsers:
    Chrome: 141.0.7390.56
    Edge: Chromium (140.0.3485.54)
    Firefox: 143.0.4 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @sveltejs/adapter-node: ^5.3.3 => 5.3.3
    @sveltejs/kit: ^2.46.4 => 2.46.4
    @sveltejs/vite-plugin-svelte: ^6.2.1 => 6.2.1
    svelte: ^5.39.11 => 5.39.11
    vite: ^7.1.9 => 7.1.9
Severity

blocking an upgrade

Additional Information

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with the linked SvelteKit repository, especially src/routes/todos/todos.svelte and the createTodo.enhance flow. Inspect how getTodos().withOverride is applied after repeated submissions and compare local behavior with SvelteLab; done means rapid mutations consistently render the current todo list rather than an older state.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.