React の useDebounce フック

はじめに

この実験では、ユーザー入力のデバウンス処理を行うためのカスタム React フックであるuseDebounceを作成する方法を学びます。デバウンス処理とは、関数の呼び出しを遅延させる技術であり、最後に呼び出されてから一定時間が経過するまで、関数の呼び出しを遅らせます。この技術は、ユーザー入力がアプリケーションの状態を頻繁に更新するシナリオで一般的に使用され、不要な再レンダリングを減らし、パフォーマンスを向上させるのに役立ちます。

React の useDebounce フック

VM 内には既にindex.htmlとscript.jsが用意されています。一般的には、script.jsとstyle.cssにのみコードを追加すればよいです。

与えられた値をデバウンス処理するには、valueとdelayを受け取るカスタムフックを作成します。デバウンスされた値を格納するためにuseState()フックを使用し、valueが更新されるたびにデバウンスされた値を更新するためにuseEffect()フックを使用します。前の状態変数のセッターの呼び出しをdelayミリ秒だけ遅らせるには、setTimeout()を使用します。コンポーネントがマウント解除される際にクリーンアップするには、clearTimeout()を使用します。これは、ユーザー入力を扱う際に特に役立ちます。

以下は、useDebounce()フックの例の実装です：

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = React.useState(value);

  React.useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
};

このuseDebounce()フックをコンポーネントで使用する方法は以下の通りです：

const Counter = () => {
  const [value, setValue] = React.useState(0);
  const lastValue = useDebounce(value, 500);

  return (
    <div>
      <p>
        Current: {value} - Debounced: {lastValue}
      </p>
      <button => setValue(value + 1)}>Increment</button>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<Counter />);

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは React の useDebounce フックの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習することができます。