ReactのSuspenceで表示処理を遅らせる

はじめに

非同期処理や重たい処理の場合、特定の部分は送らせて表示する。こんな事がよくあります。例えば、写真の表示やAPI通信の結果に基づいて表示する場合、処理が重たい箇所は先に表示して、重たい処理は完了してから実装するって事を実施したいです。今回、Suspenceを利用するとできるので、紹介します。

成果物

最初から表示済みコンポーネント、2秒後に表示されるコンポーネントに分けて処理。

2秒後

ソースコード

src/App.tsx

import React, { lazy, Suspense } from 'react';
const MyLazyComponent = lazy(() => import('./MyLazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyLazyComponent />
        <div>ロードに関わらず、表示します。</div>
      </Suspense>
    </div>
  );
}

export default App;

src/MyLazyComponent.tsx(重たい処理のコンポーネント)

import React, { useState, useEffect } from 'react';

function MyLazyComponent() {
  const [showComponent, setShowComponent] = useState(false);

  useEffect(() => {
    // 2秒後にコンポーネントを表示する
    const timer = setTimeout(() => {
      setShowComponent(true);
    }, 2000);

    // コンポーネントがアンマウントされた場合、タイマーをクリアする
    return () => clearTimeout(timer);
  }, []);

  if (!showComponent) {
    return (
      <div>
        <p>Loading...</p>
      </div>
    );
  }

  return (
    <div>
      <h2>My Lazy Component</h2>
      <p>This is a lazy-loaded component.</p>
    </div>
  );
}

export default MyLazyComponent;