useDeferredValue

const [query, setQuery] = useState("");
const deferredQuery = useDeferredValue(query);
const isStale = query !== deferredQuery;
// 重い一覧の描画にはdeferredQueryだけを使う

入力欄はqueryにそのまま繋がっていて常に即座に反応する。重い一覧はuseDeferredValueで受け取ったdeferredQueryだけを見ているので、入力中はわざと少し遅れてついてくる。useDeferredValueは「値そのもの」の反映を遅らせる仕組みで、setStateを呼んでいる側のコードは一切変えずに、値を受け取って使う側だけに導入できるのが特徴。

// useTransition: 更新する側(setStateの呼び出し元)に印を付ける
const [isPending, startTransition] = useTransition();
startTransition(() => setQuery(nextValue));

// useDeferredValue: 受け取った値の消費側で遅らせる
const deferredQuery = useDeferredValue(query);

どちらも「急がなくていい更新」を中断可能にする点は同じ。違うのは、どこに印を付けるか。useTransitionは「更新のトリガー側」のコードを書き換えられるときに使う。useDeferredValueは、値の発生元を変更できない場合(propsで渡されてきた値や、外部から届く値)でも、受け取る側だけで導入できる。