状態更新を「緊急でない」としてマークし、UIのブロッキングを防ぐ。重いレンダリングがある場合でもユーザー操作をサクサク保つ。
const [isPending, startTransition] = useTransition()
const [isPending, startTransition] = useTransition();
startTransition(() => {
setHeavyState(newValue); // 低優先度として扱われる
});import { useState, useTransition } from 'react';
function SearchPage() {
const [query, setQuery] = useState('');
const [results, setResults] = useState<string[]>([]);
const [isPending, startTransition] = useTransition();
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// 入力欄は即座に更新（緊急）
setQuery(e.target.value);
// 重い絞り込み処理は低優先度で実行
startTransition(() => {
const filtered = heavyFilter(e.target.value);
setResults(filtered);
});
};
return (
<div>
<input value={query} onChange={handleChange} />
{isPending && <span>絞り込み中...</span>}
<ul>{results.map(r => <li key={r}>{r}</li>)}</ul>
</div>
);
}startTransition内の更新はサスペンドが発生しても現在のUIを保持し続ける（useTransition + Suspense の組み合わせ）。