Zenn
😗

React: 多重クリック防止に関する実装

2021/10/14に公開
React
TypeScript
多重クリック
tech

React: 多重クリック防止に関する実装

多重クリックとは

formのbuttonにおいて、通常の実装で記載すると、処理時間内にbuttonが謳歌された回数だけ、処理が走ってしまう。
例えば、Amazonなどのショッピングサイトなどで、「購入する」をクリックしたとする。
そこで「多重クリック防止」処理が適切に実装されていなければ、2重にクリックした際に、2回処理が走ってしまう。
そうなると、2回購入したことになってしまい、余計に代金を支払うリスクも出てくる。
今回の「多重クリック防止に関する実装」では、そういったことを防ぐための実装である。

多重クリック防止のポイント

処理中フラグの判定を useRef にし、値を変更しても再レンダリングを発生させないようにする。

const SubmitForm = () => {
  const processing = useRef(false)

  const handleSubmit = (e) => {
    e.preventDefault()
    e.stopPropagation()

    processing.current && return

    processing.current = true

    setTimeout(() => {
      process.current = false
    }, 3000)
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  )
}
  • processing: 処理中のフラグ。
  • e.preventDefault: submitした際の本来のイベントである「ページのリロード」をキャンセル。
  • e.stopPropagation: イベントの伝播をキャンセル。
  • processingの現在の状態（processing.current）がtrue（処理中）の場合は、非同期処理せずに抜ける
  • setTimeout で、3000msは処理状態をfalseして非同期処理。

reference

GitHubで編集を提案

Discussion