Remote form() result persists after navigation

[mquandalle]

Describe the bug

The docs state that form() result values are ephemeral and "will vanish if you navigate away", but they actually persist when returning to the page.

Reproduction

https://stackblitz.com/edit/sveltekit-form-ephemeral-state-bug

Logs

System Info

System:
    OS: macOS 15.5
    CPU: (8) arm64 Apple M2
    Memory: 80.34 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    npm: 9.6.4 - /opt/homebrew/bin/npm
    pnpm: 10.18.3 - /opt/homebrew/bin/pnpm
    bun: 1.3.0 - ~/.bun/bin/bun
  Browsers:
    Chrome: 141.0.7390.108
    Safari: 18.5
  npmPackages:
    @sveltejs/adapter-auto: ^6.1.0 => 6.1.1
    @sveltejs/kit: ^2.43.2 => 2.47.3
    @sveltejs/vite-plugin-svelte: ^6.2.0 => 6.2.1
    svelte: ^5.39.5 => 5.41.4
    vite: ^7.1.7 => 7.1.12

Severity

annoyance

Additional Information

No response

[sillvva]

@dummdidumm I think the issue here is that the way remote form works is you're importing an instance of a remote form rather than a function that creates a new instance. Since the import is cached in memory even as you navigate around, the values in that instance are retained.

If it were a function that you call to create an instance, it would create a new instance each time the page is loaded and only the function would be cached in memory.

So instead of:

<script lang="ts">
  import { todoForm } from "./form.remote.ts";
</script>

<form {...todoForm}> <!-- same instance every time -->
  ...
</form>

It should be:

<script lang="ts">
  import { todoForm } from "./form.remote.ts";
  const form = todoForm(); // creates new instance every time
</script>

<form {...form}>
  ...
</form>

I tested this out with a local copy of sveltekit and it seemed to work, although I was unable to get the types and .remote.ts export limitation working correctly.

[agillispie]

I have a remote form wrapper component that lets me easily pass custom on success, error, etc...hooks to a custom enhance function and was going crazy thinking I was doing something wrong lol. Same bug noticed here running kit v2.43.2

[sillvva]

This is also a temporary workaround that I'm using. Using a unique form id with .for() creates a new instance on each page load. .for() has a built-in feature to delete the current instance when unmounted.

Ultimately, though, I think making it a function would be a better DX.

[mquandalle]

If the goal is to keep the existing API without instanciating a new form on each page, maybe onNavigate could be used to reset the form (but I don't know if it runs if we stay on the same page but add for instance a query parameter to the url, which would be unwanted)

[sillvva]

With a function, you could still cache a form instance to get the current behavior by exporting the instance from a module instead of calling it directly from the page/component.

// $lib/remote/forms.ts
import { todoForm } from './forms.remote.ts';

export const cachedTodoForm = todoForm();

There's also PR #14779 awaiting approval to add the ability to programmatically reset the state(s) of a form instance.