0

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
1

1 件の回答 1

0

回答ではないのですが、

まず状況を再現するのもできない...
Done にならない。

https://codesandbox.io/s/competent-fog-2j757d?file=/src/suspensetest.js

codesandbox の react: 18.3.0 はいろいろ選べるのだけど、まだ開発中っぽいから無理なのかな。

1
  • 1秒ごとにrender SuspenseTest が出力されいますね…。じつは私の質問に書いたコードも(自分は関係ないと思っていた)_app.tsxの実装で挙動が少し変わるようで。もっと最小のコードを用意したいとおもいます。 9月22日 18:27

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。