多くの場合、ユーザーが非同期効果を実行するアクションを終了するまで待機します.この例の大きな例は、ユーザーが各キーストロークで行うよりも入力を終了した後に検索を実行します.これは、私たちがジャイリングUI変更または多くの不必要で潜在的に高価なフェッチ要求を発射するのを防ぎます.
このポストでは、我々はカスタムの反応フックを書くだろう任意の効果を論じる!

フックを書く

我々のフックはuseEffectフックのように見えなければなりません.そして、我々が議論したい時間のために、それがさらなるtimeパラメタを取るべきであるという例外で.したがって、パラメータは次のようになります.

効果機能

依存の配列

デビッド時間

債務行動の達成

討論するには、setTimeoutを使用します.キャッチアウトは、タイムアウトが実行される前に再実行が実行された場合、タイムアウトをキャンセルして新しいものを起動します.我々は、timeとクリーンアップ機能を使用してそれを達成することができます.したがって、フックは次のようになります.

import { useEffect } from "react";

function useDebouncedEffect(fn, deps, time) {
  const dependencies = [...deps, fn, time] 
  useEffect(() => {
    const timeout = setTimeout(fn, time);
    return () => {
      clearTimeout(timeout);
    }
  }, dependencies);
}

フックを見る

この例では、ユーザーがテキストボックスで入力を停止するときに、単に遅延された遅延でいくつかの状態を設定します.ここにコードです!

function App() {
  const [text, setText] = useState("")
  const [debounced, setDebounced] = useState("")

  useDebouncedEffect(() => {
    setDebounced(text);
  }, [text], 1000)

  return (
    <div className="App">
      <input onChange={e => {
          setText(e.target.value)
        }} value={text} 
      />
      <p>{debounced}</p>
    </div>
  );
}

そして、我々が行動でそれを試みるとき..動く!