問題一覧に戻る
上級パフォーマンス最適化
問題88: 並行機能

優先度ベースのレンダリングのためのuseTransitionを使ったReactの並行機能を学びます。状態更新を非緊急としてマークし、重い計算中もUIをレスポンシブに保ちます。高価な更新がバックグラウンドで処理される間、ユーザー入力はスムーズなままです。UIをブロックしてしまう検索、フィルタリング、データ可視化に必須です。

import React, { useState, useTransition } from 'react';

function App() {
  const [query, setQuery] = useState('');
  const [list, setList] = useState([]);
  {/* transitionフックを使用 */}
  const [isPending, ] = ();

  const handleSearch = (e) => {
    const value = e.target.value;
    setQuery(value);
    
    {/* 低優先度更新を開始 */}
    (() => {
      const filtered = Array.from({ length: 5000 }, (_, i) => 
        `Item ${i}`
      ).filter(item => item.includes(value));
      setList(filtered);
    });
  };

  return (
    <div>
      <input value={query} onChange={handleSearch} />
      {/* pending表示を表示 */}
      { && <p>Searching...</p>}
      <ul>
        {list.slice(0, 20).map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;