react 18.3.0 の use
を使ったfetchとSuspenseを行いたいのですが、複数回(ときには無制限)の再レンダリングが発生してしまっています。
解決方法を教えてください。
- react: 18.3.0-canary-3ff846d10-20230724
- next: 13.4.12
以下のコードでトップページを開くと画面にDone
が表示されるまでの間、render SuspenseTest
が複数回(5~8回ほど)コンソールに出力されます。
1度だけレンダリングされるようにしたいです。
よろしくお願いします。
// src/pages/index.tsx
import { Suspense } from "react"
import Head from "next/head"
import SuspenseTest from "@/components/modules/SuspenseTest"
import Layout from "@/layout/Default"
import styles from "./index.module.scss"
const Top = (): JSX.Element => {
return (
<>
<Head>
<title>Suspense Test</title>
</Head>
<Layout>
<main className={styles.Top}>
<Suspense fallback={<div>Now Loading...</div>}>
<SuspenseTest />
</Suspense>
</main>
</Layout>
</>
)
}
export default Top
// src/components/modules/SuspenseTest/index.tsx
import { use } from "react"
const fetcher = (): Promise<string> => {
return new Promise((resolve) => setTimeout(resolve, 5000))
// 実際に行いたいのは以下のような処理
// return axiosClient
// .get("/articles")
// .then((response) => {
// return response.data as Promise<Article[]>
// })
// .catch((error) => console.error(error))
}
const SuspenseTest = (): JSX.Element => {
console.log("render SuspenseTest")
use<string>(fetcher())
return <div>Done</div>
}
export default SuspenseTest