Reactで、fetchに時間切れと中止ボタンを両方付ける方法

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

export type FetchState =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'done'; text: string }
  | { status: 'timeout' }
  | { status: 'canceled' }
  | { status: 'error'; message: string };

export function useFetchWithCancel(timeoutMs: number) {
  const [state, setState] = useState<FetchState>({ status: 'idle' });
  const controllerRef = useRef<AbortController | null>(null);

  // コンポーネントが消えるときは、取得中のリクエストを中止する
  useEffect(() => () => controllerRef.current?.abort(), []);

  async function start(url: string) {
    controllerRef.current?.abort(); // 前のリクエストが残っていれば中止する
    const controller = new AbortController();
    controllerRef.current = controller;
    // 中止ボタン用のシグナルと、時間切れのシグナルを1つにまとめる
    const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(timeoutMs)]);
    setState({ status: 'loading' });
    try {
      const res = await fetch(url, { signal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const text = await res.text();
      setState({ status: 'done', text });
    } catch (err) {
      if (controllerRef.current !== controller) return; // 新しいリクエストに切り替わった
      // 止めた理由は、err ではなく signal.reason から読む
      const reason = signal.aborted ? signal.reason : err;
      if (reason instanceof DOMException && reason.name === 'TimeoutError') {
        setState({ status: 'timeout' });
      } else if (reason instanceof DOMException && reason.name === 'AbortError') {
        setState({ status: 'canceled' });
      } else {
        setState({ status: 'error', message: String(err) });
      }
    } finally {
      if (controllerRef.current === controller) controllerRef.current = null;
    }
  }

  function cancel() {
    controllerRef.current?.abort();
  }

  return { state, start, cancel };
}

function CatFetcher({ url }: { url: string }) {
  const { state, start, cancel } = useFetchWithCancel(3000);
  const loading = state.status === 'loading';
  const elapsed = useElapsed(loading);
  return (
    <section className="fetcher">
      <div className="buttons">
        <button onClick={() => start(url)}>取得する</button>
        <button onClick={cancel} disabled={!loading}>中止</button>
      </div>
      <p className="status" data-status={state.status}>{message(state)}</p>
      <p className="elapsed">経過 {(elapsed / 1000).toFixed(1)} 秒</p>
    </section>
  );
}

--- 1. 1秒で返る API（時間切れは3秒）
  押す前: まだ取得していません ／中止ボタン disabled: true
  0.3秒後: 取得しています… ／中止ボタン disabled: false
  1032ms 後: 取得しました：たま（3歳）
  サーバー:     0ms /api/cat?delay=1000 受信
  サーバー:  1002ms /api/cat?delay=1000 応答を送り終えた

--- 2. 5秒かかる API（時間切れは3秒）
  3038ms 後: 3秒たっても終わらないため、取得をやめました
  サーバー:     0ms /api/cat?delay=5000 受信
  サーバー:  3000ms /api/cat?delay=5000 送り終える前に接続が切れた
--- 3. 5秒かかる API で、1秒後に中止ボタンを押す
  1088ms 後: 取得を中止しました
  サーバー:     0ms /api/cat?delay=5000 受信
  サーバー:  1051ms /api/cat?delay=5000 送り終える前に接続が切れた
  さらに2.5秒後（時間切れの3秒を過ぎた）: 取得を中止しました

if (err instanceof DOMException && err.name === 'TimeoutError') {
        setState({ status: 'timeout' });
      } else if (err instanceof DOMException && err.name === 'AbortError') {
        setState({ status: 'canceled' });

--- 0b. ヘッダーはすぐ返り、本文の残りに5秒かかる API
  3047ms 後: 取得を中止しました
  サーバー:     0ms /api/slow-body 受信
  サーバー:     0ms /api/slow-body ヘッダーと本文の最初を送った
  サーバー:  3000ms /api/slow-body 送り終える前に接続が切れた

--- 8. 本文を読んでいる途中で止まったときの、res.text() のエラー
{
  "any() でまとめたシグナル": {
    "rejectedAt": "res.text()",
    "name": "AbortError",
    "message": "The user aborted a request.",
    "sameAsSignalReason": false,
    "signalReasonName": "TimeoutError"
  },
  "AbortSignal.timeout() だけ": {
    "rejectedAt": "res.text()",
    "name": "AbortError",
    "message": "The user aborted a request.",
    "sameAsSignalReason": false,
    "signalReasonName": "TimeoutError"
  }
}

--- 4. ヘッダーはすぐ返り、本文の残りに5秒かかる API
  3036ms 後: 3秒たっても終わらないため、取得をやめました
  サーバー:     0ms /api/slow-body 受信
  サーバー:     0ms /api/slow-body ヘッダーと本文の最初を送った
  サーバー:  2999ms /api/slow-body 送り終える前に接続が切れた

--- 5. 1秒かかる API で、0.5秒後にもう一度「取得する」を押す
  2.5秒の間に出た表示: ["取得しています…","取得しました：たま（3歳）"]
  サーバー:     0ms /api/cat?delay=1000 受信
  サーバー:     0ms /api/cat?delay=1000 受信
  サーバー:   544ms /api/cat?delay=1000 送り終える前に接続が切れた
  サーバー:  1001ms /api/cat?delay=1000 応答を送り終えた

--- 6. 取得中に「表示する」を外して、コンポーネントを消す
  コンポーネントの数: 0
  サーバー:     0ms /api/cat?delay=5000 受信
  サーバー:  1044ms /api/cat?delay=5000 送り終える前に接続が切れた