2

I am creating a simple site that uses Next.js. In this site, Next.js pre-render an md file, convert it to html, and display the result.

This site has a very simple structure, but if I hit page transitions or language switches repeatedly right after loading, I get

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 To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Is there something wrong with the following pre-rendering process?

The pre-rendering process (coded with reference to the official documentation)

// getAllPostIds, getSortedHeadlineTitles, and getPostData are methods in the library that expand the contents of the md files stored in the posts directory.

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>
  )
}

If you interpret the warning text as I wrote above, the update is also executed when unMounting.

The code I checked with the dev tool after bundling is

function Post(_ref) {
  _s();

  var _this = this;

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

The following are omitted

and this

  var sortedHeadlineTitles = _ref.sortedHeadlineTitles,

is the problem, according to the dev tool.

If you can give me a hint, I would appreciate it.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
  • 2
    Check [Can't perform a React state update on an unmounted component](https://stackoverflow.com/q/53949393/2873538), you can prevent this by maintaining a flag like `isMounted` and avoid **set state** when its value is `false`. – Ajeet Shah Jan 24 '21 at 17:27
  • 1
    Thank you so much for writing comment. I understand the link you wrote, but I am considering how can I fix my code. In my code, probably props `{ sortedHeadlineTitles, postAllData, locale }` is the most suspicious point. But I can not control it by using `isMounted` status. – Yuki Agatsuma Jan 25 '21 at 02:40

0 Answers0