使用 useDeferredValue 優化渲染和輸入卡頓

經常寫 react 的朋友們都知道，當某些需要大計算量的組件更新時，可能會阻塞其他輸入，比如一個典型的 filter select options 場景，每次輸入都計算那些項被過濾出來，由於輸入的非常快，就會造成卡頓。將用於過濾的值使用 useDeferredValue，就可以分開這兩部分，主動降低篩選的優先級，避免和輸入競爭造成的卡頓。

特別是在需要處理大量數據或複雜計算的場景中。它的主要作用是將一個值的更新延遲到主線程空閒時再執行，從而避免因為大量或頻繁的狀態更新而導致的 UI 卡頓問題。

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

function SearchComponent({ items }) {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  const filteredItems = useMemo(
    () => items.filter(item => item.includes(deferredQuery)),
    [items, deferredQuery]
  );

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="搜尋..."
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}