JavaScript Reactでのデバウンスの実装方法

まず、デバウンスが何をするのかを理解しましょう。デバウンスは、連続したイベントが発生した場合に、最初のイベントを無視して一定時間待ち、最後のイベントが発生してから処理を実行するというものです。これにより、連続したイベントによる処理のオーバーヘッドを減らすことができます。

以下に、JavaScriptとReactでデバウンスを実装する方法とコード例を示します。

JavaScriptの場合:

function debounce(func, delay) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  }
}
// 使用例
function handleInput() {
  // 入力が停止してから500ミリ秒後に処理を実行する
  console.log("Input processed!");
}
const debouncedHandleInput = debounce(handleInput, 500);
// イベントリスナーにデバウンスされた関数を使用
document.addEventListener('input', debouncedHandleInput);

Reactの場合:

import React, { useState, useEffect } from 'react';
function DebouncedInput() {
  const [inputValue, setInputValue] = useState('');
  useEffect(() => {
    const delay = 500; // デバウンスの遅延時間
    const timeoutId = setTimeout(() => {
      console.log("Input processed:", inputValue);
    }, delay);
    return () => clearTimeout(timeoutId);
  }, [inputValue]);
  const handleChange = (event) => {
    setInputValue(event.target.value);
  };
  return (
    <input type="text" value={inputValue} onChange={handleChange} />
  );
}
// 使用例
function App() {
  return (
    <div>
      <h1>Debounced Input</h1>
      <DebouncedInput />
    </div>
  );
}
export default App;

上記のコード例では、debounce関数を使用してデバウンスを実装しています。JavaScriptの例では、debounce関数を使用してイベントリスナーにデバウンスされた関数を渡します。Reactの例では、useEffectフックを使用してデバウンスされた処理を実行し、useStateフックを使用して入力値を管理します。

このようにして、JavaScriptやReactでデバウンスを実装することができます。デバウンスは、パフォーマンスの向上や不要な処理の実行を避けるために役立つテクニックです。