useDeferredValue

const deferredQuery = useDeferredValue(query); // string
// deferredQuery はQueryが変わっても少し遅れて更新される

import { useState, useDeferredValue, useMemo } from 'react';

// ── useTransition との違い ─────────────────────────────
// useTransition: 「更新を後回し」にする（自分で制御）
// useDeferredValue: 「値を後回し」にする（受け取った値を遅延）

function SearchList({ query }: { query: string }) {
  // query の更新を遅延させた値を作る
  // → 入力が速い間は古い値を使い、落ち着いたら最新値に追従
  const deferredQuery = useDeferredValue(query);

  // deferredQuery が変わったときだけ重いフィルタリングを実行
  const filteredItems = useMemo(
    () => heavyFilter(allItems, deferredQuery),
    [deferredQuery]
  );

  // query と deferredQuery が違う → まだ更新中
  const isStale = query !== deferredQuery;

  return (
    <div>
      {/* 処理中は薄く表示してユーザーに「更新中」を伝える */}
      <ul style={{ opacity: isStale ? 0.5 : 1 }}>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  const [query, setQuery] = useState('');
  return (
    <div>
      {/* 入力欄は即座に更新（カクつきなし）*/}
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <SearchList query={query} />
    </div>
  );
}