Next.js 「Can't perform a React state update on an unmounted component」という警告が発生し、メモリリークしてしまいます。

Question

Next.jsでmdファイルをpre-renderingしてhtmlに変換し、その結果を表示するシンプルなサイトを作成しています。

非常にシンプルな構成のサイトなのですが、ページ遷移や言語切り替えをローディング直後に連打すると

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

という警告文が表示されます。

以下のpre-rendering処理に何か問題があるのでしょうか？

pre-rendering処理（公式のドキュメントを参考に実装）

// getAllPostIds, getSortedHeadlineTitles, getPostDataはライブラリにあるメソッドで、postsディレクトリに格納されているmdファイルの内容を展開しています

export async function getStaticPaths({ locales }) {
  const paths = getAllPostIds(locales)

  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps({ params, locale }) {
  const sortedHeadlineTitles = getSortedHeadlineTitles(locale);

  // ids = ['04', '03', '02', '01']
  const ids = []
  let n = parseInt(params.id, 10);

  while (0 < n) {
    const strId = `0${n}`; 
    ids.push(strId)
    n = n - 1;
  }

  const postAllData = async () => {
    return await Promise.all(
      ids.map(async (id) => {
        const postData = await getPostData(id, locale);
  
        return {
          id,
          contents: postData,
        }
      })
    )
  };

  return {
    props: {
      sortedHeadlineTitles,
      postAllData: await postAllData(),
      locale,
    }
  }
}

export default function Post({ sortedHeadlineTitles, postAllData, locale }) {
  return (
    <Layout sortedHeadlineTitles={sortedHeadlineTitles}>

      <About locale={locale} />

      {postAllData.map((postData) => (
        <PostData postData={postData} key={postData.id} />
      ))}
    </Layout>
  )
}

警告文の通りに解釈すると、unMount時にも更新がかかってしまっているそうです。

バンドル後のdevツールで確認したコードは

function Post(_ref) {
  _s();

  var _this = this;

  var sortedHeadlineTitles = _ref.sortedHeadlineTitles,
      postAllData = _ref.postAllData,
      locale = _ref.locale;

以下　割愛

となっており、この

  var sortedHeadlineTitles = _ref.sortedHeadlineTitles,

が問題だとdevツールで記載されていました。

ヒントでも結構ですのでご教示いただけますと幸いです。

Comments

[YND_teratail]

タグの部分が、Next.jsのはずなのに、Nuxt.jsになっていますので、編集をよろしくお願いします。