Calling useTranslation may cause runtime error (Next 12.2 on React 18.2 with Streaming SSR)

🐛 Bug Report

Please forgive me for listing the issue in this repository, although it is possible that this problem is caused by Next or React.

The following runtime error occurs when useTranslation is called on a component doing Streaming SSR in Next.js 12.2.

Unhandled Runtime Error

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.

If useTranslation is not called, this problem does not occur.
However, this only occurs with developer builds and not with production builds.
Also, if the strict mode of React is turned off, it will not occur even in developer builds.

To Reproduce

CodeSandbox

import { GetServerSideProps, NextPage } from "next";
import { SSRConfig, useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { Suspense } from "react";

type Props = SSRConfig;

let data: string;

const SampleComponent = (): JSX.Element => {
  if (!data) {
    throw new Promise(async (resolve) => {
      // The reason for the 200 ms stop is that this problem does not occur when the response time is around 100 ms.
      await new Promise((resolve) => setTimeout(resolve, 200));

      data = "resolved!";

      resolve(true);
    });
  }

  return <div>{data}</div>;
};

const IndexPage: NextPage<Props> = () => {
  // Runtime Error occurs when calling the hook of next-i18next (react-i18next)
  const { t } = useTranslation(["common"]);

  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <SampleComponent />
      </Suspense>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps<Props> = async (
  context
) => {
  return {
    props: {
      ...(await serverSideTranslations(context.locale ?? "en"))
    }
  };
};

export default IndexPage;

Expected behavior

Runtime error (This Suspense boundary received an update before it finished hydrating.) is not occurred.

Your Environment

• runtime version: node v16.15.0
• React version: 18.2.0
• Next.js version: 12.2.5
• i18next version: 21.8.14
• next-i18next version: 11.3.0
• os: Ubuntu-20.04

[AppleNectar]

@adrai @jamuhl Oh my god…

I apologize for the lack of verification… I have tried the code you provided and have confirmed that the same problem occurs. It seems to be a problem on the Next.js side, so I will consider putting an issue in the repository there.

Thank you for responding so quickly. Thank you so much.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.