App Router Error: Rendered more hooks than during the previous render

[matallui]

Hi!

I'm hitting an issue with App Router in which React throws an error about different hook calls during rerender.

I would open a bug instead, but I can't provide a reproduction link since this is a private repo.
I'm also not sure how to create a reproduction example, since I don't fully understand the problem.

Any chance anyone else has seen this? Or can point me in the right direction?
I'm happy to test this locally and potentially open a PR, just trying to get some guidance first.

For context, this seems to happen when I call router.replace(). I've also been able to hit the issue in production when calling router.refresh(). Somehow seems to be related to calling a refresh() at a random "inconvenient" time for Next or something. Either way, seems like it could be a bug in App Router, since I wouldn't expect to see this in any scenario.

This example is running Next 14.0.0 but I've tested with 14.0.4 and got the same error.

Thanks in advance!

[icyJoseph]

Hi,

Are you calling router.replace or any method under the router, while rendering? as in:

const App = () => {
  if (condition) router.replace()
 
 return <div />
}

That'll lead to disaster, because it is setting state as your render, which means the render is not pure, which means you are potentially batching more state updates, while trying to reflect an state update.

• https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes good read here

The root cause being that, router methods (replace, push, etc) are now using React's state management, useReducer. You can install redux-devTools and see the actions being dispatched! (Because the Next.js team connected their useReducer to the redux-devTools) ~

Anyway, could you see if this is the issue?

[Reflex2468]

@bartoszhernas I'm experiencing the same issue. Locally I've also been able to get it sometimes through HMR but in general it seems very hard to reliably reproduce. Does it always happen to you or is it also only sometimes?

[bartoszhernas]

I've created a new issue with that #75841

I keep having this issue, seen in production on https://fragplace.com when clicking eg. on a single perfumer

Improvement from version 14 is that main /loading.tsx is not appearing

[pythonicode]

@bartoszhernas @Reflex2468 I am having the same issue with a server page.tsx:

export default async function Home() {
    if (process.env.NEXT_PUBLIC_ENVIRONMENT === 'production') {
        return redirect('my-website');
    }

    return null;
}

Rendered more hooks than during the previous render.

I am shocked I can't find anything else about this online? This is a major issue in our app that cannot be resolved by any typical debugging?

[bartoszhernas]

It now also happens after clicking on magic link with next-auth v5 beta25 library

[heecheon92]

@bartoszhernas @Reflex2468 I am having the same issue with a server page.tsx:

export default async function Home() {
    if (process.env.NEXT_PUBLIC_ENVIRONMENT === 'production') {
        return redirect('my-website');
    }

    return null;
}

Rendered more hooks than during the previous render.

I am shocked I can't find anything else about this online? This is a major issue in our app that cannot be resolved by any typical debugging?

I think this method pattern should be allowed. I mean, converting page.tsx into route.ts kind of resolves the issue but page.tsx should be able to use "redirect" based on a condition.

[Machinarius]

I am wondering if this could be triggering for us from a React Server Component? We have an RSC as our main src/app/page.tsx that is in charge of next/navigation#redirect-ing our users to particular areas of our app after they log-in. Given how that function works by injecting a <meta> tag so the Next client-side code performs the actual redirection, I am wondering if that's why we are triggering this error?

We are using Next 15.2.0

[bartoszhernas]

Temporary fix is to use client side redirection instead.

Example code:

  // instead of:
  // redirect(profileUrl(session.user));
  // https://github.com/vercel/next.js/issues/57455
  return <RedirectionPage redirectUrl={profileUrl(session.user)} replace />;

import SimpleContainer from '@/containers/components/SimpleContainer';
import { Card, CardBody, CardText, CardTitle } from 'reactstrap';
import React from 'react';
import { LoadingIcon } from '@/containers/components/LoadingIcon';
import RedirectionPageClient from '@/containers/RedirectionPageClient';

export default function RedirectionPage({ redirectUrl, replace }: { redirectUrl?: string; replace?: boolean }) {
  return (
    <>
      {redirectUrl && <RedirectionPageClient redirectUrl={redirectUrl} replace={replace} />}
      <SimpleContainer>
        <Card className="p-4">
          <CardBody className="text-center">
            <CardText className={'mx-auto mb-3 opacity-50'}>
              <LoadingIcon isLg />
            </CardText>
            <CardTitle tag="h2">Redirecting</CardTitle>
            <CardText>Please wait a second</CardText>
          </CardBody>
        </Card>
      </SimpleContainer>
    </>
  );
}

export default function RedirectionPageClient({ redirectUrl, replace }: { redirectUrl: string; replace?: boolean }) {
  const router = useRouter();
  useEffect(() => {
    if (replace) {
      router.replace(redirectUrl);
    } else {
      router.push(redirectUrl);
    }
  }, [redirectUrl, replace, router]);
  return null;
}

[EthicalJobsJesse]

Raising this just in case it helps anyone else. We were running into this issue consistently and it ended up being a race condition with an external script being initialized at the same time as a server side redirect was happening. Not too sure what part of the script was doing it, but I'm guessing it was trying to modify some values of the window history at the same time as NextJS and that caused the error.

For anyone experiencing this issue but having no luck elsewhere, I'd recommend trying to disable or delay <Script /> loading if possible to see if it's a loading/initialization conflict.