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.