React 開発者として、私たちは、複数の急速な状態変化を API と同期する必要があるシナリオによく直面します。小さな変更ごとに API 呼び出しを行うのは非効率的であり、クライアントとサーバーの両方に負担がかかる可能性があります。ここで、デバウンスと賢明な状態管理が機能します。この記事では、ペイロードをマージし、API 呼び出しをデバウンスすることで、並列 API 更新呼び出しをキャプチャするカスタム React フックを構築します。

問題

ユーザーが設定や好みを調整できる入力フィールドを想像してください。キーストロークまたは調整ごとに API 呼び出しをトリガーして、新しい状態を保存できます。ユーザーが複数の変更を立て続けに行うと、API リクエストが大量に発生する可能性があります:

• ネットワーク リソースの非効率的な使用。
• 潜在的な競合状態。
• サーバーに不要な負荷がかかります。

デバウンスに入る

デバウンシングは、関数が起動できる速度を制限するために使用される手法です。関数をすぐに呼び出すのではなく、一定期間非アクティブになってから実行します。遅延が終了する前に別の電話がかかってくると、タイマーがリセットされます。

デバウンスを使用する理由

• パフォーマンスの向上: 不要な API 呼び出しの数を減らします。
• リソースの最適化: サーバーの負荷とネットワークの使用量を最小限に抑えます。
• ユーザー エクスペリエンスの強化: 急速な連続通話による遅延や潜在的なエラーを防ぎます。

useRef の役割

React の useRef は、再レンダリングをトリガーせずにレンダリング間で変更可能な値を保持できるようにするフックです。これは本質的に、変更可能な値を保持するコンテナです。

ここで useRef を使用する理由

• 蓄積された更新を保持する: 再レンダリングを発生させずに、レンダリング間で蓄積された更新を追跡する必要があります。
• 可変の現在の値へのアクセス: useRef は、読み取りと書き込みができる .current プロパティを提供します。

useDebouncedUpdate フック

コードを詳しく見て、すべてがどのように組み合わされるかを理解しましょう。

import { debounce } from "@mui/material";
import { useCallback, useEffect, useRef } from "react";

type DebouncedUpdateParams = {
  id: string;
  params: Record;
};

function useDebouncedUpdate( apiUpdate: (params: DebouncedUpdateParams) => void,
  delay: number = 300, ) {
  const accumulatedUpdates = useRef(null);

  const processUpdates = useRef(
    debounce(() => {
      if (accumulatedUpdates.current) {
        apiUpdate(accumulatedUpdates.current);
        accumulatedUpdates.current = null;
      }
    }, delay),
  ).current;

  const handleUpdate = useCallback(
    (params: DebouncedUpdateParams) => {
      accumulatedUpdates.current = {
        id: params.id,
        params: {
          ...(accumulatedUpdates.current?.params || {}),
          ...params.params,
        },
      };
      processUpdates();
    },
    [processUpdates],
  );

  useEffect(() => {
    return () => {
      processUpdates.clear();
    };
  }, [processUpdates]);

  return handleUpdate;
}

export default useDebouncedUpdate;

ブレイク・イット・ダウン

1. useRef を使用して更新を蓄積する

すべての受信アップデートの組み合わせパラメータを保存するために、accumulatedUpdates という useRef を初期化します。

constAccumulatedUpdates = useRef(null);

2. API 呼び出しのデバウンス

マテリアル UI のデバウンス ユーティリティを使用して、デバウンス関数 processUpdates を作成します。

const processUpdates = useRef(
  debounce(() => {
    if (accumulatedUpdates.current) {
      apiUpdate(accumulatedUpdates.current);
      accumulatedUpdates.current = null;
    }
  }, delay),
).current;

• processUpdate に useRef を使用する理由? useRef を使用して、デバウンスされた関数がレンダリングごとに再作成されないようにするため、デバウンス タイマーがリセットされます。

3. useCallback を使用した更新の処理

handleUpdate 関数は、更新を蓄積し、デバウンスされた API 呼び出しをトリガーする役割を果たします。

const handleUpdate = useCallback(
  (params: DebouncedUpdateParams) => {
    accumulatedUpdates.current = {
      id: params.id,
      params: {
        ...(accumulatedUpdates.current?.params || {}),
        ...params.params,
      },
    };
    processUpdates();
  },
  [processUpdates],
);

• パラメータのマージ: すべての更新が確実にキャプチャされるように、新しいパラメータを既存のパラメータとマージします。
• デバウンスのトリガー: handleUpdate が呼び出されるたびに processUpdates() をトリガーしますが、実際の API 呼び出しはデバウンスされます。

4. useEffect を使用したクリーンアップ

メモリ リークを防ぐために、コンポーネントがアンマウントされるときにデバウンス関数をクリアします。

useEffect(() => {
  return () => {
    processUpdates.clear();
  };
}, [processUpdates]);

仕組み

1. Accumulate Parameters: 各アップデートはそのパラメータをaccumulatedUpdates.currentに追加し、既存のパラメータとマージします。
2. デバウンス実行: processUpdates は、実行前に遅延ミリ秒間の非アクティブ状態を待機します。
3. API 呼び出し: デバウンス時間が経過すると、マージされたパラメータを使用して apiUpdate が呼び出されます。
4. 累積更新をリセット: API 呼び出し後、accumulatedUpdates.current を null にリセットします。

使用例

このフックをコンポーネントで使用する方法は次のとおりです:

import React from "react";
import useDebouncedUpdate from "./useDebouncedUpdate";

function SettingsComponent() {
  const debouncedUpdate = useDebouncedUpdate(updateSettingsApi, 500);

  const handleChange = (settingName, value) => {
    debouncedUpdate({
      id: "user-settings",
      params: { [settingName]: value },
    });
  };

  return (
    

       handleChange("username", e.target.value)}
      />
       handleChange("notifications", e.target.checked)}
      />
    
  );
}

function updateSettingsApi({ id, params }) {
  // Make your API call here
  console.log("Updating settings:", params);
}

• ユーザー アクション: ユーザーが設定を入力するか設定を切り替えると、handleChange が呼び出されます。
• デバウンスされた更新: 変更は蓄積され、非アクティブ状態が 500 ミリ秒続くと API に送信されます。

結論

デバウンスと状態蓄積を組み合わせることで、効率的で応答性の高いアプリケーションを作成できます。 useDebouncedUpdate フックにより、急速な変更がまとめてバッチ処理され、不必要な API 呼び出しが削減され、パフォーマンスが向上します。

重要なポイント:

• デバウンスは、急速に連続する通話を管理するために不可欠です。
• useRef を使用すると、再レンダリングを行わずに可変状態を維持できます。
• カスタム フック (useDebouncedUpdate など) は複雑なロジックをカプセル化し、コンポーネントをよりクリーンで保守しやすくします。

このフックをプロジェクトに自由に統合し、特定のニーズに合わせて調整してください。コーディングを楽しんでください!