reactでlodashのdebounceを使うと、連続関数実行後、ひとつにまとまらない。

Question

reactでlodashのdebounceを使うと連続した関数の実行は、最後に実行した関数の任意の秒数後、一度だけ実行されるはずなのですが、任意の秒数後、実行した回数だけ関数が実行されます。なぜでしょうか？

Comments

[maisumakun]

どのようなコードを書きましたか？

[marugon]

関数コンポーネント内で簡易ですが以下を実行すると、helloが5秒後にたくさんでます。

const hello = ()=>{
console.log("hello");
}
window.addEventListener('scroll', _.debounce(hello, 5000));

Answer 1

以下を実行すると、helloが5秒後にたくさんでます。

_.debounceを毎回実行しているので、「バラバラなイベントをセットした」ものとして動いてしまいます。

_.debounceの結果をReact.useMemoなどでキャッシュしておきましょう。

Comments

[marugon]

ありがとうございます。助かりました。