使用 useDeferredValue でレンダリングと入力の遅延を最適化

2024年8月26日#react41

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

React朋友们知道，使用useDeferredValue可以避免大计算量组件更新时的卡顿问题，特别是在处理大量数据或复杂计算时。使用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>
  );
}