⚡

Reactパフォーマンス最適化：頻繁にトリガーされるコールバックに対するDebounceとThrottle最適化

2024/11/13に公開

React

原文: Song's Blog
検索コンポーネントでは、入力内容が変更されると検索コールバックがトリガーされます。コンポーネントが検索結果を迅速に処理できる場合、ユーザーは入力の遅延を感じません。しかし、実際のシナリオでは、ミドルエンドやバックエンドアプリケーションのリストページが非常に複雑で、検索結果に基づくコンポーネントのレンダーによってページが遅くなり、ユーザーの入力体験に明らかに影響を及ぼします。

 Debounce
useDebounce とuseEffectのアプローチは、通常、検索シナリオでデータを取得するために使用されます。この方法では、入力の変更を遅延させることで、頻繁なAPIリクエストやデータの更新を防ぎ、パフォーマンスを最適化します。
Example reference: debounce-search
import { useState, useEffect } from "react";
import { useDebounce } from "use-debounce";

import "./styles.css";

export default function App() {
  const [text, setText] = useState("Hello");
  const [debouncedValue] = useDebounce(text, 300);

  useEffect(() => {
    // search api
  }, [debouncedValue]);

  return (
    <div>
      <input
        defaultValue={"Hello"}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      <p>Actual value: {text}</p>
      <p>Debounce value: {debouncedValue}</p>
    </div>
  );
}

 Throttle
throttleはdebounceの特別なシナリオであり、debounceにmaxWaitパラメータを追加します。これにより、指定した時間内に呼び出しが一定回数以上行われないように制限されます。詳細は useThrottleCallback を参照してください。

 Debounce Versus Throttleなぜ検索シナリオではthrottleではなくdebounceが使用されるのですか？

debounceは検索シナリオにより適しており、ユーザーの最後の入力にのみ反応することが求められます。ユーザーの途中の入力には反応する必要はありません。
throttleは、ユーザーに対してリアルタイムで反応が求められるシナリオにより適しています。
ドラッグアンドドロップによるサイズ変更
ドラッグアンドドロップによるズームイン・ズームアウト
例えば、ウィンドウのリサイズイベント...
リアルタイムでユーザーの反応が必要なシナリオでは、コールバックの間隔が小さい場合、throttleの代わりにrequestAnimationFrameを使用することもできます。

Debounce

Throttle

Debounce Versus Throttle

Discussion