client side forms / redirect fail, dev mode errors

[aheissenberger]

Describe the bug

A form defined in a "use client"; component using an form action to send the data to the server.

1. import { useActionState } from "@lazarv/react-server/router"; cannot be used - see examples/file-router/pages/forms/components/form-rs.tsxx
2. using import { useActionState } from "react"; works (examples/file-router/pages/forms/components/form.tsx) but there are the following errors:

A) DEV Mode: Hydration Errors are a side effect of using redirect("/form")

 [react-server] (browser) You are mounting a new %s component when a previous one has not first unmounted. It is an error to render more than one %s component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of <%s> and if you need to mount a new one, ensure any previous ones have unmounted first.

B) the redirect("/forms") or reload("/forms") in the createOrUpdateNote() function is not redirecting to the list view (examples/file-router/pages/forms/actions.ts)

Note: in my real world app a form even without the notation "use client"; and all parent component are not client components will send the form data as rsc stream from the browser and causes the same problems with redirect as when form is a "use client"; component.

Reproduction

https://github.com/aheissenberger/react-server/tree/example_contacts/examples/file-router/pages/forms

Steps to reproduce

See example app in repository

System Info

System:
    OS: macOS 15.7.1
    CPU: (12) arm64 Apple M4 Pro
    Memory: 469.05 MB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.10.0 - /opt/homebrew/bin/node
    npm: 11.6.0 - /opt/homebrew/bin/npm
    pnpm: 9.15.5 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 141.0.7390.123
  npmPackages:
    @lazarv/react-server: workspace:^ => 0.0.0 
    react: 0.0.0-experimental-ead92181-20251010 => 0.0.0-experimental-ead92181-20251010

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[aheissenberger]

The redirect("/forms") function should also work when using the server side form action without using useActionState()

[lazarv]

The latest version includes a fix to make redirect/reload work properly with the file-system based router, and it also fixes a pathname rewrite issue when using the router.

I'll incrementally add more testing around the file-system based router and basic framework features, as these are mostly tested without the router at the moment.

The only difference now between redirect() and reload() is that the latter supports targeting other outlets and doesn't throw an error, allowing the server function to finish execution.

[aheissenberger]

1. no more hydration errors
2. redirect("/firm") works like and cancels the server action. @lazarv The interesting thing is, that the function in the browser still returns a promise but with the default value of state
3. reload("/firm") works like and finishes the server action. The function in the browser returns a promise but with the value returned by the server action.
4. im both cases the component does not run and effects based on state are not called

   // this uses useActionState from react
   const [state, submitAction, isPending] = useActionState<
       FormDataState,
       FormData
     >(
       async (state, formData) => {
         const result = await createOrUpdateServerAction(state, formData);
         console.log("Action result:", result); 
         // returns for 
         //     reload: {state: 'success', redirectTo: '/forms'}
         //     redirect: {state: 'initial'}
         return result;
       },
       {
         state: "initial",
       }
     );

@lazarv: Maybe this behavior should be added to the documentation. You should consider to use an other name for the useActionState from @lazarv/react-server/router as it behaves differently and has a different function signature.

[github-actions]

This issue has been locked since it has been closed for more than 30 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest version of @lazarv/react-server. If you have any other comments you should create a new discussion.