lazyとSuspenseでコンポーネントを後から読み込む方法

// Settings.tsx
import { useState } from 'react';

export default function Settings() {
  const [notify, setNotify] = useState(false);
  return (
    <section id="settings">
      <h2>設定</h2>
      <label>
        <input
          id="notify"
          type="checkbox"
          checked={notify}
          onChange={(e) => setNotify(e.target.checked)}
        />
        通知を受け取る
      </label>
    </section>
  );
}

import { lazy, Suspense, useState } from 'react';
import { createRoot } from 'react-dom/client';

const Settings = lazy(() => import('../Settings'));

function App() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button id="toggle" onClick={() => setOpen(!open)}>
        {open ? '閉じる' : '設定を開く'}
      </button>
      {open && (
        <Suspense fallback={<p id="loading">読み込み中…</p>}>
          <Settings />
        </Suspense>
      )}
    </>
  );
}

createRoot(document.getElementById('root')!).render(<App />);

--- B1. ボタンを押すまで、Settings のファイルは読み込まれない（応答を 800ms 遅らせる） ---
     22ms 要求: basic.js
     46ms 応答: basic.js（200）
     48ms 要求: chunks/chunk-2TCA6HDD.js
     53ms 応答: chunks/chunk-2TCA6HDD.js（200）
   1156ms （開いてから 1 秒たっても、Settings は要求されていない）
   1156ms > 「設定を開く」をクリック
   1188ms 要求: chunks/Settings-CDNPFV2N.js
   1988ms 応答: chunks/Settings-CDNPFV2N.js（200）
   2496ms 設定が表示された（読み込み中…: 出た、クリックから 810ms）
   2500ms > 「閉じる」をクリック
   2513ms > 「設定を開く」をクリック
   2855ms 設定が表示された（読み込み中…: 出なかった、クリックから 1ms）

// Profile.tsx は export function Profile() { ... } と書いている
const Profile = lazy(() =>
  import('./Profile').then((m) => ({ default: m.Profile })),
);

bad/NoDefault.tsx(4,28): error TS2322: Type 'Promise<typeof import("./src/Profile")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.
  Property 'default' is missing in type 'typeof import("./src/Profile")' but required in type '{ default: ComponentType<any>; }'.

export function LazyInside() {
  const [n, setN] = useState(0);
  // 🔴 描画のたびに、新しい lazy コンポーネントができる
  const InsideSettings = lazy(loadSettings);
  return (
    <>
      <button id="rerender" onClick={() => setN(n + 1)}>親を再描画（{n}）</button>
      <Suspense fallback={<p>読み込み中…</p>}>
        <InsideSettings />
      </Suspense>
    </>
  );
}

--- 3b. lazy をコンポーネントの中で宣言 ---
（中略）
  > #rerender をクリック
  [load を呼んだ（2回目）]
  画面: <button id="rerender">親を再描画（1）</button><section id="settings" style="display: none !important;"><h2>設定</h2><label><input id="notify" type="checkbox">通知を受け取る</label></section><p>読み込み中…</p>
  （「読み込み中…」が消えるまで 300 ミリ秒）
  画面: <button id="rerender">親を再描画（1）</button><section id="settings" style=""><h2>設定</h2><label><input id="notify" type="checkbox">通知を受け取る</label></section>
  チェック: true
  load の呼び出し: 2回

// import を呼ぶ関数を分けておき、lazy とボタンの両方から使う
const loadSettings = () => import('../Settings');
const Settings = lazy(loadSettings);

function App() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button
        id="toggle"
        onPointerEnter={() => { loadSettings(); }}
        onFocus={() => { loadSettings(); }}
        onClick={() => setOpen(!open)}
      >
        {open ? '閉じる' : '設定を開く'}
      </button>
      {open && (
        <Suspense fallback={<p id="loading">読み込み中…</p>}>
          <Settings />
        </Suspense>
      )}
    </>
  );
}

--- B2b. カーソルを乗せてから 300ms でクリックした場合（応答を 800ms 遅らせる） ---
（中略）
    647ms > 「設定を開く」にカーソルを乗せる
    692ms 要求: chunks/Settings-CDNPFV2N.js
    994ms > 「設定を開く」をクリック
   1496ms 応答: chunks/Settings-CDNPFV2N.js（200）
   1814ms 設定が表示された（読み込み中…: 出た、クリックから 490ms）

function App() {
  const [open, setOpen] = useState(false);
  return (
    // Suspense を、最初から表示されている部分の外側に置く
    <Suspense fallback={<p id="loading">読み込み中…</p>}>
      <button
        id="toggle"
        onPointerEnter={() => { loadSettings(); }}
        onFocus={() => { loadSettings(); }}
        onClick={() => startTransition(() => setOpen(!open))}
      >
        {open ? '閉じる' : '設定を開く'}
      </button>
      {open && <Settings />}
    </Suspense>
  );
}

--- B2c. Suspense を外側に置き、setOpen を startTransition で包んだ場合（応答を 800ms 遅らせる） ---
（中略）
   1702ms > 「設定を開く」をクリック
   2050ms 設定が表示された（読み込み中…: 出なかった、クリックから 17ms）

--- B2d. Suspense を外側に置き、startTransition で包んだ画面で、届く前にクリック（応答を 800ms 遅らせる） ---
（中略）
    706ms > 「設定を開く」にカーソルを乗せる
    749ms 要求: chunks/Settings-CDNPFV2N.js
   1050ms > 「設定を開く」をクリック
   1291ms 画面: 設定を開く
   1553ms 応答: chunks/Settings-CDNPFV2N.js（200）
   1613ms 画面: 閉じる設定通知を受け取る
  読み込み中…: 出なかった

--- 4a. 失敗したあと、同じ lazy のまま Error Boundary を戻す ---
（中略）
  > #retry をクリック
  [onCaughtError] 読み込みに失敗
  画面: <div role="alert"><p>読み込めませんでした（読み込みに失敗）</p><button id="retry">もう一度</button></div>
（中略）
  load の呼び出し: 1回

const loadSettings = () => import('../Settings');

function SettingsArea() {
  const [Settings, setSettings] = useState<ComponentType>(() => lazy(loadSettings));
  return (
    <ErrorBoundary
      fallback={({ reset }) => (
        <div id="failed" role="alert">
          <p>読み込めませんでした</p>
          <button
            id="retry"
            onClick={() => {
              setSettings(() => lazy(loadSettings));
              reset();
            }}
          >
            もう一度
          </button>
        </div>
      )}
    >
      <Suspense fallback={<p id="loading">読み込み中…</p>}>
        <Settings />
      </Suspense>
    </ErrorBoundary>
  );
}

--- B3. 1回目の要求を失敗させ、lazy を作り直して読み込み直す ---
（中略）
    104ms 要求: chunks/Settings-CDNPFV2N.js
    113ms 応答: chunks/Settings-CDNPFV2N.js（500）
    443ms 画面: 読み込めませんでしたもう一度
    446ms > 「もう一度」をクリック
   2079ms 画面: 読み込めませんでしたもう一度
   2083ms > ページを読み込み直す
（中略）
   2135ms 要求: chunks/Settings-CDNPFV2N.js
   2237ms 応答: chunks/Settings-CDNPFV2N.js（200）
   2943ms 画面: 設定通知を受け取る