React アプリで API 呼び出しを最適化した方法

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<string, any>;
};

function useDebouncedUpdate( apiUpdate: (params: DebouncedUpdateParams) => void,
  delay: number = 300, ) {
  const accumulatedUpdates = useRef<DebouncedUpdateParams | null>(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;




</p>
<ul>
<li> <strong>processUpdate に useRef を使用する理由</strong> デバウンスされた関数がレンダリングごとに再作成されないようにするために useRef を使用します。これにより、デバウンス タイマーがリセットされます。</li>
</ul>

<h4>
  
  
  3. useCallback を使用した更新の処理
</h4>

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

<pre class="brush:php;toolbar:false">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. パラメータの累積: 各更新ではパラメータが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 (
    <div>
      <input
        type="text"
        onChange={(e) => handleChange("username", e.target.value)}
      />
      <input
        type="checkbox"
        onChange={(e) => handleChange("notifications", e.target.checked)}
      />
    </div>
  );
}

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

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

結論

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

重要なポイント:

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

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

以上がReact アプリで API 呼び出しを最適化した方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。