Error: This Suspense boundary received an update before it finished hydrating.

[Fabiantjoeaon]

Hey! Thanks again for opening up your ecosystem of tools, this was just what I was looking for - as proper page transitions in React / Next.js with lifecycle hooks are far from trivial :)

I'm currently trying to implement this using Next.js like this:

function DefaultPageTransition({ children }) {
  const router = useRouter();

  // get a more friendly path name (especially for generic pages instead of [...slug])
  const pageName = router.asPath;

  return (
    <PageTransitions
      key={router.isReady ? "hydrated" : "ssr"} // make sure ?querystring parsing works
      pageName={pageName}
    >
      {children}
    </PageTransitions>
  );
}

<DefaultPageTransition>
            <Component key={router.asPath} {...pageProps} />
</DefaultPageTransition>

I get this error however:

Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

This happens in PageWrapper.tsx, I've tried the following, but to no avail:

useEffect(() => {
   startTransition(() => {
     store.setState({ suspendedRoute: pathname });
   });
   return () => {
     startTransition(() => {
       store.setState({ suspendedRoute: null });
     });
   };
 }, [pathname]);

I've also tried changing useEffect to useIsoMorphicLayoutEffect, but that won't help either.

[Fabiantjoeaon]

I'm on Next.js v14.2.5 using the pages router

[ffdead]

Hi @Fabiantjoeaon - sorry for the silcence, I somehow don't get an email on new issues, not sure what setting to adjust 🤔

Not exactly sure why this happens in your case, it's a bit delicate depending on the Nextjs version and order of components it seems.

For isntance, I've had this error happen when calling usePageTransition() as a hook in the layout component outside the component - but solved it by wrapping it in a functional component instead of just using the hook.

Sorry for not having more ideas!