Suspenseの仕組み：Promiseをthrowする設計

// Suspense対応のキャッシュラッパーを実装する
function createResource(fetchFn) {
  let status = 'pending';
  let result;
  
  // Promiseを即座に起動して結果をキャッシュ
  const promise = fetchFn().then(
    data => {
      status = 'success';
      result = data;
    },
    error => {
      status = 'error';
      result = error;
    }
  );
  
  return {
    read() {
      if (status === 'pending') {
        throw promise;        // ← ここでPromiseをthrow！
      } else if (status === 'error') {
        throw result;         // ← エラーはError Boundaryへ
      } else {
        return result;        // ← 成功時はデータを返す
      }
    }
  };
}

// 使い方
const userResource = createResource(() => fetchUser(userId));

function UserProfile() {
  // データが未準備ならPromiseをthrow、準備できていればデータを返す
  const user = userResource.read();
  return <div>{user.name}</div>; // ここに来る時は必ずデータがある
}

// packages/react-reconciler/src/ReactFiberThrow.js（概略）
function throwException(root, returnFiber, sourceFiber, value) {
  // throwされた値がPromise（thenable）かどうか確認
  if (
    value !== null &&
    typeof value === 'object' &&
    typeof value.then === 'function'
  ) {
    // Suspense対応のwakeable（Promiseのこと）
    const wakeable = value;
    
    // 最も近いSuspenseバウンダリを探す
    let workInProgress = returnFiber;
    do {
      if (workInProgress.tag === SuspenseComponent) {
        // Suspenseバウンダリのfallbackをアクティベートするようフラグを立てる
        workInProgress.flags |= ShouldCapture;
        
        // Promise完了時に再レンダリングをスケジュール
        wakeable.then(() => {
          // retryDehydratedSuspenseBoundary相当の処理
          scheduleUpdateOnFiber(root, workInProgress, SyncLane);
        });
        return;
      }
      workInProgress = workInProgress.return;
    } while (workInProgress !== null);
  }
  // Promiseでなければ Error Boundary へ
}

// ネストしたSuspenseバウンダリ
function App() {
  return (
    // 外側のバウンダリ：ページ全体のローディング
    <Suspense fallback={<PageSkeleton />}>
      <Header />
      
      {/* 内側のバウンダリ：コンテンツだけのローディング */}
      <Suspense fallback={<ContentSpinner />}>
        <MainContent />    {/* ← throwすると内側のfallbackが表示 */}
        <Sidebar />        {/* ← throwすると内側のfallbackが表示 */}
      </Suspense>
      
      <Footer />
    </Suspense>
  );
}

// MainContentがPromiseをthrowする場合：
// → 内側のSuspenseがキャッチ → ContentSpinnerを表示
// → HeaderとFooterは通常通りレンダリングされる

function App() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();
  
  return (
    <>
      <button onClick={() => {
        startTransition(() => setTab('profile'));
        // startTransitionを使うと...
        // → profileタブのSuspenseが解決するまで
        //   homeタブのUIを維持する（古いUIを表示し続ける）
        // → fallbackへの切り替えを避けられる！
      }}>
        プロフィールへ
      </button>
      
      {isPending && <div class="loading-bar" />}
      
      <Suspense fallback={<Spinner />}>
        {tab === 'home' && <HomeTab />}
        {tab === 'profile' && <ProfileTab />}
      </Suspense>
    </>
  );
}

// startTransitionなしだと：
// → タブを切り替えた瞬間にSpinnerが表示される（flickering）
// startTransitionありだと：
// → 新しいタブのデータが来るまでhomeUIを維持（smoother）

import { lazy, Suspense } from 'react';

// 動的インポートをラップ
const HeavyComponent = lazy(() => import('./HeavyComponent'));
// ↑ これはPromiseを返す関数をラップしたもの

function App() {
  return (
    <Suspense fallback={<div>読み込み中...</div>}>
      <HeavyComponent />
      {/* 初回レンダリング時、HeavyComponentのJSが未ロードなら
          内部でPromiseをthrow → Suspenseがfallbackを表示
          JSロード完了後 → 再レンダリングしてHeavyComponentを表示 */}
    </Suspense>
  );
}

// React.lazyの内部実装イメージ
function lazy(loadFn) {
  let status = 'pending';
  let result;
  const promise = loadFn().then(
    module => { status = 'fulfilled'; result = module.default; },
    error  => { status = 'rejected';  result = error; }
  );
  
  return function LazyComponent(props) {
    if (status === 'pending')   throw promise;    // Suspenseへ
    if (status === 'rejected')  throw result;     // Error Boundaryへ
    return createElement(result, props);           // 通常レンダリング
  };
}

import { use, Suspense } from 'react';

// fetchUserはPromiseを返す
async function fetchUser(id) {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

function UserProfile({ userId }) {
  // useフックがPromiseを受け取り、
  // - 未解決ならPromiseをthrow（Suspenseがキャッチ）
  // - 解決済みならデータを返す
  const user = use(fetchUser(userId));
  
  return <div>{user.name}</div>;
}

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <UserProfile userId={1} />
    </Suspense>
  );
}

// ※ useフックはif文の中でも使える（通常のHooks規則の例外）
function ConditionalFetch({ userId, shouldFetch }) {
  if (shouldFetch) {
    const user = use(fetchUser(userId)); // OK！
    return <div>{user.name}</div>;
  }
  return null;
}