問題一覧に戻る
中級カスタムフック
問題56: useDebounce

入力の遅延処理を行うカスタムフックの実装を学びます。ユーザー入力が止まってから一定時間後に処理を実行し、不要なAPIコールや再レンダリングを防ぎます。検索入力、フォーム検証、自動保存など、頻繁に変更される値の処理に最適です。タイマーを使用して遅延を実装し、クリーンアップでメモリリークを防ぎます。パフォーマンス最適化の基本テクニックです。

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

{/* デバウンスカスタムフック */}
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    {/* タイマーを設定 */}
    const timer = setTimeout(() => {
      setDebouncedValue();
    }, );
    
    {/* タイマーをクリア */}
    return () => clearTimeout();
  }, [value, delay]);
  
  return debouncedValue;
}

function App() {
  const [search, setSearch] = useState("");
  {/* デバウンスされた値 */}
  const debouncedSearch = (search, 500);
  
  return (
    <div>
      <input value={search} onChange={(e) => setSearch(e.target.value)} />
      <p>検索: {debouncedSearch}</p>
    </div>
  );
}

export default App;
···