Bug: "Rendered more hooks than ..." throws when it shouldn't with multiple suspends

[Ephem]

React version: 19.1.0

I've tried hard to create a minimal reproduction for this one with just React and failed, but for reasons I'll describe I still suspect this might be a React bug and not only a Next.js one.

There are several reproductions over in the Next.js repo: #63121 #63388 #78396 #80483

This one is very, very hard to describe so sorry for a lengthy post. In essence, I think there are situations where transitions changing out a currently pending promise passed to use results in "Rendered too many hooks" being thrown, even when there are no conditional hooks or early returns.

This is not enough however, there seems to be some extra secret ingredient that is required to trigger this which I have not found, maybe incremental hydration?

Why I think this is a bug

This is happening in code paths where there are no conditional hooks being rendered. (Well, there is in the Next case, but it's a NODE_ENV check and the bug happens even when that is removed)

Besides the Next.js reproductions, which vary in how they trigger the bug, I've also seen this happen on a separate code path in our repo, in user land-code where there are also no conditional hooks or early returns. That code path also has two possible Suspends in the same custom hook. This also uses the Next app router, but unlike the reproductions above, the stack trace does not lead to Next.js internals. This internal bug is very hard to reproduce consistently unfortunately.

Some debugging details

• I have been debugging #78396 with a local Next.js build
• The bug is triggered on this line in app-router.tsx, but the actual error seems to stem from this line in useActionQueue (?)
  • return isThenable(state) ? use(state) : state
• I removed the if (process.env.NODE_ENV !== 'production') { conditional hook case just to be sure
• I added a few logs to useActionQueue, when the bug triggers this is what has happened:

• That is, a server action is still pending when a redirect happens
• The error happen when the redirect fulfills
• If the server action is removed, bug goes away
• If I add enough delay for the redirect so the server action has time to finish, the bug goes away, that is, this is fine:

• I have also added a breakpoint to the error itself inside of updateWorkInProgressHook
  • currentHook exists but does not have a .next
  • workInProgressHook exists but does not have a .next
  • This is the stack trace, from beginWork:

I know this is very fuzzy and I'm sorry I don't have more details, but this is where my React debugging skills runs out and I still wanted to report it as there is some good evidence at least part of this bug lies on the React side of things.

I'm happy to provide whatever more details I can help with.

[xabierlameiro]

This is a tricky issue that involves the interaction between React Suspense, transitions, and hook counting. The "Rendered more hooks than during the previous render" error typically indicates a violation of the Rules of Hooks, but as you mentioned, the code paths involved do not have conditional hooks.

Understanding the Issue

The error occurs in the updateWorkInProgressHook function when React expects more hooks in the hook chain than are actually present. Based on your debugging details, this happens when:

1. A server action is pending (using use(state) in useActionQueue)
2. A redirect happens while the server action is still pending
3. The redirect fulfills, causing React to re-render with a different hook chain

Why This Happens

When use() is called with a promise that changes (from the pending server action to the fulfilled redirect), React may be seeing different hook execution patterns between renders. This is particularly problematic when combined with transitions and Next.js navigation.

Potential Solutions

1. Ensure Consistent Hook Ordering

Make sure that any conditional logic around the use() call is stable:

// Instead of:
return isThenable(state) ? use(state) : state;

// Consider:
const result = use(isThenable(state) ? state : Promise.resolve(state));
return result;

2. Add Error Boundaries

Wrap components that use useActionQueue in error boundaries to gracefully handle these transitions:

<ErrorBoundary fallback={<div>Something went wrong</div>}>
  <YourComponent />
</ErrorBoundary>

3. Cancel Pending Actions on Navigate

Consider cancelling pending server actions when navigation occurs to avoid concurrent state.

Similar Issues & Status

This appears related to several known issues with React 19 and concurrent features:

• Similar reports with Next.js App Router and concurrent operations
• Issues with use() hook and changing promises during Suspense
• Hook counting problems during transition phases

Workarounds

Until this is resolved:

1. Add delays between operations as you discovered
2. Avoid concurrent server actions during navigation
3. Use traditional navigation methods for critical paths
4. Consider using React 18 if feasible for your project

Reporting to Next.js

Since this primarily manifests in Next.js contexts, consider also reporting this to the Next.js repository with your detailed debugging information.

The React team would benefit from a minimal reproduction case that doesn't involve Next.js, if you can create one.

[lucasfiduniv]

Hello everyone,

Following up on this complex issue, I dedicated some time to create a targeted minimal reproduction based on the excellent analysis provided by @efem and @xabierlameiro.

Methodology
The reproduction environment was specifically engineered to trigger the scenario where a promise passed to the use() hook (encapsulated within useActionState) is swapped for a different promise mid-transition.

This was achieved using a single Server Action that can either perform a slow async operation or trigger a redirect(). The behavior is controlled by two separate submit buttons within the same <form>, allowing the test protocol to be:

Submit the "slow action" to put the useActionState into a pending state, suspended on the first promise.
Immediately after, submit the "redirect action" to force the same useActionState to be re-rendered with the new promise thrown by redirect().
This successfully creates the exact race condition described as the root cause of the bug.

Environment
OS: macOS
Next.js: 15.3.4-rc.0
React / React DOM: ^19.1.0-rc.0
Package Manager: pnpm
Results
The application handles this race condition gracefully. The redirect() is processed correctly after the second form submission, and the page navigates to the success route as expected.

Crucially, the Error: Rendered more hooks than during the previous render does NOT occur. The application remains stable and does not crash.

Conclusion
This outcome provides strong evidence that the underlying bug in React's concurrent renderer, which was triggered by this specific state transition, has likely been resolved in the recent Release Candidate versions of React 19 and/or Next.js 15.

I hope this successful "failure to reproduce" is helpful to the team and can contribute to confirming the fix for this issue. Thank you for the detailed initial reports.

https://github.com/lucasfiduniv/bug-report/tree/main/nextjs-server-action-redirect-race