useTransition

const [isPending, startTransition] = useTransition();
startTransition(() => {
  setHeavyState(newValue); // 低優先度として扱われる
});

import { useState, useTransition } from 'react';

// ── 問題: 重い更新がUIをブロックする ─────────────────
// 例：10万件のリストをフィルタリングすると入力がカクつく

function SearchList() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<string[]>([]);
  // isPending: 遷移処理が進行中かどうか
  const [isPending, startTransition] = useTransition();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;

    // ✅ 入力欄の更新は即座に（優先度高）
    setQuery(value);

    // ✅ 重いフィルタリングは「後回し」にする（優先度低）
    startTransition(() => {
      // この中の更新は他の緊急な更新が来たら中断・延期される
      const filtered = hugeList.filter(item => item.includes(value));
      setResults(filtered);
    });
  };

  return (
    <div>
      <input value={query} onChange={handleChange} placeholder="検索..." />

      {/* 処理中はローディング表示 */}
      {isPending ? (
        <p>フィルタリング中...</p>
      ) : (
        <ul>{results.map(r => <li key={r}>{r}</li>)}</ul>
      )}
    </div>
  );
}