【React】SuspenseではuseEffectは使えない

事象

supabaseに作ったテストデータを読み込む間にローディングメッセージを出したいと思い、Suspenseで実装しましたが、全く表示されませんでした。

コード

(supabase周り等、関係ない部分は省略）

App.jsx

import { useState } from 'react';
import { LogDisplay } from './components/LogDisplay';

export const App = () => {
  (中略）
  return (
    <div>
      （中略）
      <LogDisplay />
      （中略）
      </div>
    </div>
  );
};

LogDisplay.jsx

import { Suspense } from 'react';
import { Loading } from './Loading';
import { LogContent } from './LogContent';

export const LogDisplay = () => {
  return (
    <Suspense fallback={<Loading />}>
      <LogContent />
    </Suspense>
  );
};

Loading.jsx

export const Loading = () => {
  return <div>Loading...</div>;
};

LogContent.jsx

import { useEffect, useState } from 'react';
import { getAllLogs } from '../utils/supabaseFunctions';

export const LogContent = () => {
  const [logs, setLogs] = useState([]);

  useEffect(() => {
    const getLogs = async () => {
      const logs = await getAllLogs();
      setLogs(logs);
    };
    getLogs();
  }, []);

  return (
    <div>
      {logs.map((log) => (
        <p key={log.id}>
          {log.title} {log.time}時間
        </p>
      ))}
    </div>
  );
};

原因

もうタイトルで答えは出ているのですが、Suspenseでは基本的にuseEffectは使えないようです。
https://qiita.com/tarako314/questions/baf7e50ac1af5a926e0f
https://ja.react.dev/reference/react/Suspense#displaying-a-fallback-while-content-is-loading

サスペンスコンポーネントをアクティブ化できるのはサスペンス対応のデータソースだけです。これには以下が含まれます：

• Relay や Next.js のようなサスペンス対応のフレームワークでのデータフェッチ
• lazy を用いたコンポーネントコードの遅延ロード
• use を用いたキャッシュ済みプロミス (Promise) からの値の読み取り

サスペンスはエフェクトやイベントハンドラ内でデータフェッチが行われた場合にはそれを検出しません。

少しuseやpromiseをthrowする方法について調べてみましたが、現在のコードはほぼ使えなさそうですね……
今回はuseEffectを使ってデータ取得・表示を行うのが目的なので、Suspenseの使用は諦めた方が良さそうです。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼