Reactで、届いた文章を少しずつ表示する方法

read() の回数 36、1回の大きさ 7,3 バイト、文字の途中で切れていたかたまり 24
かたまりごとに new TextDecoder().decode()：元の文章と同じ=false、U+FFFD の数=61
1つの TextDecoder で decode(c, { stream: true })：元の文章と同じ=true、U+FFFD の数=0
pipeThrough(new TextDecoderStream())：元の文章と同じ=true、U+FFFD の数=0
かたまりごとに直した文章の先頭："猫の���も��りたいほ���忙��い日でも���届��た文章を���し��つ表"

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

export type StreamStatus = 'idle' | 'streaming' | 'done' | 'stopped' | 'error';

export function useStreamedText() {
  const [text, setText] = useState('');
  const [status, setStatus] = useState<StreamStatus>('idle');
  const controllerRef = useRef<AbortController | null>(null);

  const stop = useCallback(() => {
    controllerRef.current?.abort();
  }, []);

  const start = useCallback(async (url: string, init?: RequestInit) => {
    // 前の受信が続いていたら止める
    controllerRef.current?.abort();
    const controller = new AbortController();
    controllerRef.current = controller;
    const isCurrent = () => controllerRef.current === controller;

    setText('');
    setStatus('streaming');

    // 届いた文字はいったん pending にため、1フレームに1回だけ state に足す
    let pending = '';
    let frame = 0;
    const flush = () => {
      frame = 0;
      if (!isCurrent() || pending === '') return;
      const add = pending;
      pending = '';
      setText((prev) => prev + add);
    };

    try {
      const res = await fetch(url, { ...init, signal: controller.signal });
      if (!res.ok || !res.body) throw new Error(`HTTP ${res.status}`);
      // バイト列を文字列に直す。文字の途中で切れたバイトは、次のかたまりとつなげてから直す
      const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        pending += value;
        if (frame === 0) frame = requestAnimationFrame(flush);
      }
      cancelAnimationFrame(frame);
      flush();
      if (isCurrent()) setStatus('done');
    } catch {
      cancelAnimationFrame(frame);
      if (!isCurrent()) return; // 新しい受信に切り替わった後なので、何もしない
      flush(); // 止める前に届いていた分は残す
      setStatus(controller.signal.aborted ? 'stopped' : 'error');
    }
  }, []);

  // コンポーネントを外したら受信を止める
  useEffect(() => () => controllerRef.current?.abort(), []);

  return { text, status, start, stop };
}

押す前：status=待機中、表示=""
途中：status=受信中…、表示の文字数=21、末尾="日でも、届いた文"
途中：status=受信中…、表示の文字数=69、末尾="も、途中で切れず"
途中：status=完了、表示の文字数=83、末尾="か確かめます。\n"
終わり：status=完了、元の文章と同じ=true、U+FFFD の数=0

前の受信を止めない版：status=done、文字数=136（元の文章は 83 文字）、元の文章と同じ=false
  表示の先頭："ている時間【2回が短目】く感猫のじられ手も借ますりた。絵いほ文字ど忙し🐈‍⬛い日や「でも漢字、届い"

useStreamedText：status=完了、文字数=83（元の文章は 83 文字）、元の文章と同じ=true
  サーバーの記録：[{"id":1,"tag":"","finished":false,"closedByClient":true},{"id":2,"tag":"","finished":true,"closedByClient":false}]

止めた直後：status=止めました、文字数=42、1秒後の文字数=42、止めるボタンの disabled=true
サーバーの記録：[{"id":1,"total":248,"sent":126,"finished":false,"closedByClient":true}]

import { useLayoutEffect, useRef } from 'react';
import { useStreamedText } from './useStreamedText';

const labels = {
  idle: '待機中',
  streaming: '受信中…',
  done: '完了',
  stopped: '止めました',
  error: 'エラーになりました',
} as const;

export function StreamDemo({ src }: { src: string }) {
  const { text, status, start, stop } = useStreamedText();
  const boxRef = useRef<HTMLDivElement>(null);
  // 下端の近くを見ているときだけ、新しい文字に合わせて下へ送る
  const stickRef = useRef(true);

  useLayoutEffect(() => {
    const box = boxRef.current;
    if (box && stickRef.current) box.scrollTop = box.scrollHeight;
  }, [text]);

  return (
    <div>
      <button
        data-testid="start"
        onClick={() => {
          // 受け取り直すときは、読んでいた位置にかかわらず下へ送る状態に戻す
          stickRef.current = true;
          start(src);
        }}
      >
        受け取る
      </button>
      <button data-testid="stop" onClick={stop} disabled={status !== 'streaming'}>
        止める
      </button>
      <span data-testid="status">{labels[status]}</span>
      <div
        ref={boxRef}
        data-testid="box"
        onScroll={(e) => {
          const el = e.currentTarget;
          stickRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 24;
        }}
        aria-busy={status === 'streaming'}
        style={{ height: 160, overflowY: 'auto', whiteSpace: 'pre-wrap', border: '1px solid #9aa5ab', padding: 8, marginTop: 8 }}
      >
        {text}
      </div>
    </div>
  );
}

受信中：{"top":0,"gap":0,"height":176}
受信中：{"top":73,"gap":0,"height":249}
受信中：{"top":191,"gap":0,"height":367}
いちばん上までスクロールした直後：{"top":0,"gap":191,"height":367}
その後も受信中：status=受信中…、{"top":0,"gap":293,"height":469}
その後も受信中：status=完了、{"top":0,"gap":376,"height":552}
完了：{"top":0,"gap":376,"height":552}
上にスクロールしたまま受け取り直す：{"top":0,"gap":0,"height":176}
上にスクロールしたまま受け取り直す：{"top":73,"gap":0,"height":249}
上にスクロールしたまま受け取り直す：{"top":191,"gap":0,"height":367}