ReactでWeb Workerを使い、重い計算中も入力を止めない方法

// わざと遅い計算。2 から limit までの数を試し割りで素数か調べ、
// 10進で書いたときに digits を含む素数の個数を返す
export function countPrimesContaining(digits: string, limit = 2_000_000): number {
  let count = 0;
  for (let n = 2; n <= limit; n++) {
    if (isPrime(n) && String(n).includes(digits)) count++;
  }
  return count;
}

function isPrime(n: number): boolean {
  if (n < 4) return n >= 2;
  if (n % 2 === 0) return false;
  for (let d = 3; d * d <= n; d += 2) {
    if (n % d === 0) return false;
  }
  return true;
}

$ node --experimental-strip-types --no-warnings bench.ts
「3」を含む素数：82892個（Node.js で 252ms）
「31」を含む素数：9521個（Node.js で 233ms）
「314」を含む素数：425個（Node.js で 260ms）
「3141」を含む素数：72個（Node.js で 193ms）
「31415」を含む素数：1個（Node.js で 192ms）
「314159」を含む素数：1個（Node.js で 194ms）

import { useMemo, useState } from 'react';
import { countPrimesContaining } from './primes';

// 描画の中で、重い計算をそのまま呼ぶ書き方
export function SyncSearch() {
  const [digits, setDigits] = useState('');
  const count = useMemo(
    () => (digits === '' ? null : countPrimesContaining(digits)),
    [digits],
  );

  return (
    <>
      <input value={digits} onChange={(e) => setDigits(e.target.value)} />
      <p className="result">{count === null ? '' : `「${digits}」を含む素数：${count}個`}</p>
    </>
  );
}

$ node measure.mjs
Chromium 141.0.7390.37
sync 1回目: 入力欄に出るまで(ms) [631, 532, 432, 928, 828, 729] / 入力欄が変わったフレーム 2回 / 最後のキーから結果が「314159」になるまで 729ms / console のエラーと警告 0件
  結果の欄に出た表示: 「314」を含む素数：425個 → 「314159」を含む素数：1個
（中略）

中央値（3回×6キーの18個と、3回の結果から）
sync: 入力欄に出るまで 中央値 632ms・最大 928ms / 結果が追いつくまで 中央値 728ms

import { memo, useDeferredValue, useMemo, useState } from 'react';
import { countPrimesContaining } from './primes';

// useDeferredValue で、計算する側に渡す値を遅らせる書き方
export function DeferredSearch() {
  const [digits, setDigits] = useState('');
  const deferredDigits = useDeferredValue(digits);

  return (
    <>
      <input value={digits} onChange={(e) => setDigits(e.target.value)} />
      <Result digits={deferredDigits} />
    </>
  );
}

const Result = memo(function Result({ digits }: { digits: string }) {
  const count = useMemo(
    () => (digits === '' ? null : countPrimesContaining(digits)),
    [digits],
  );
  return <p className="result">{count === null ? '' : `「${digits}」を含む素数：${count}個`}</p>;
});

deferred 1回目: 入力欄に出るまで(ms) [6, 117, 17, 105, 5, 90] / 入力欄が変わったフレーム 4回 / 最後のキーから結果が「314159」になるまで 277ms / console のエラーと警告 0件
  結果の欄に出た表示: 「314159」を含む素数：1個
（中略）
deferred: 入力欄に出るまで 中央値 86ms・最大 182ms / 結果が追いつくまで 中央値 277ms

import { countPrimesContaining } from './primes';
import type { PrimeResult } from './types';

// メインスレッドから数字の並びを受け取り、数えた結果を送り返す
self.onmessage = (e: MessageEvent<string>) => {
  const digits = e.data;
  const result: PrimeResult = { digits, count: countPrimesContaining(digits) };
  self.postMessage(result);
};

dist/assets/primes.worker-NoVT5Zml.js    0.28 kB
dist/index.html                          0.46 kB │ gzip:  0.33 kB
dist/assets/index-CYKDw1XK.js          221.64 kB │ gzip: 69.29 kB

export type PrimeResult = { digits: string; count: number };

import { useEffect, useRef, useState } from 'react';
import type { PrimeResult } from './types';

// Worker を1つだけ作り、入力のたびに計算を頼む書き方
export function QueueWorkerSearch() {
  const [digits, setDigits] = useState('');
  const [result, setResult] = useState<PrimeResult | null>(null);
  const workerRef = useRef<Worker | null>(null);

  useEffect(() => {
    const worker = new Worker(new URL('./primes.worker.ts', import.meta.url), { type: 'module' });
    worker.onmessage = (e: MessageEvent<PrimeResult>) => setResult(e.data);
    workerRef.current = worker;
    return () => worker.terminate();
  }, []);

  function handleChange(value: string) {
    setDigits(value);
    if (value !== '') workerRef.current?.postMessage(value);
  }

  return (
    <>
      <input value={digits} onChange={(e) => handleChange(e.target.value)} />
      <p className="result">{result && `「${result.digits}」を含む素数：${result.count}個`}</p>
    </>
  );
}

queue 1回目: 入力欄に出るまで(ms) [5, 6, 7, 7, 6, 6] / 入力欄が変わったフレーム 6回 / 最後のキーから結果が「314159」になるまで 690ms / console のエラーと警告 0件
  結果の欄に出た表示: 「3」を含む素数：82892個 → 「31」を含む素数：9521個 → 「314」を含む素数：425個 → 「3141」を含む素数：72個 → 「31415」を含む素数：1個 → 「314159」を含む素数：1個
（中略）
queue: 入力欄に出るまで 中央値 6ms・最大 7ms / 結果が追いつくまで 中央値 690ms

import { useEffect, useState } from 'react';
import type { PrimeResult } from './types';

// 入力のたびに Worker を作り、前の計算は terminate() で止める書き方
export function WorkerSearch() {
  const [digits, setDigits] = useState('');
  const [result, setResult] = useState<PrimeResult | null>(null);

  useEffect(() => {
    if (digits === '') return;
    let ignore = false;
    const worker = new Worker(new URL('./primes.worker.ts', import.meta.url), { type: 'module' });
    worker.onmessage = (e: MessageEvent<PrimeResult>) => {
      if (!ignore) setResult(e.data);
      worker.terminate();
    };
    worker.postMessage(digits);
    // 次の入力が来たら、終わっていない計算ごと Worker を止める
    return () => {
      ignore = true;
      worker.terminate();
    };
  }, [digits]);

  const pending = digits !== '' && result?.digits !== digits;

  return (
    <>
      <input value={digits} onChange={(e) => setDigits(e.target.value)} />
      <p className="result">
        {result && `「${result.digits}」を含む素数：${result.count}個`}
        {pending && '（計算中…）'}
      </p>
    </>
  );
}

worker 1回目: 入力欄に出るまで(ms) [4, 5, 4, 5, 4, 5] / 入力欄が変わったフレーム 6回 / 最後のキーから結果が「314159」になるまで 239ms / console のエラーと警告 0件
  結果の欄に出た表示: （計算中…） → 「314159」を含む素数：1個
（中略）
worker: 入力欄に出るまで 中央値 5ms・最大 9ms / 結果が追いつくまで 中央値 238ms

  Worker を作ってから最初の結果まで(ms) [196, 191, 199] / 同じ Worker での2回目(ms) [188, 193, 185]

$ node dev-check.mjs
queue: 開いた直後 作った 2・止めた 1 / 打ち終わったあと 作った 2・止めた 1 / 結果「「314159」を含む素数：1個」 / console のエラーと警告 0件
worker: 開いた直後 作った 0・止めた 0 / 打ち終わったあと 作った 6・止めた 6 / 結果「「314159」を含む素数：1個」 / console のエラーと警告 0件