TypeScript React を使用してクリック イベント関数をデバウンスする

Question

ボタンの複数回のクリックを避けるために、onclick 関数に lodash デバウンス関数を実装しようとしています。私が思いついた解決策は次のとおりです:

function saveForm() {
//ここでいくつかの操作を行います
}

<ボタン onClick={debounce(() => saveForm, 1500, {
              maxWait: 2000 })}>
              保存
</ボタン>

リターンの外側で関数に対してデバウンスを実行し、そのデバウンスされた関数を onclick で使用する例をたくさん見かけます。ボタン要素に対して直接デバウンス（インライン）を実行するのは間違っていますか？

Answer 1

適切なコーディングの実践という観点からは、JSX にビジネス ロジックを入れすぎないようにする必要があります。 onClick ハンドラーを JSX の外部に抽出するだけです。

第二に、シェーク解除後に saveForm に戻る必要はありません。代わりに電話してください。したがって、 () => saveForm を saveForm に置き換えます。

リーリー

useCallback フックを使用することもできます。 useCallback フックを使用するためのベスト プラクティスについては、必要に応じて探索していただくことに任せます。