ReactでのuseRefを使用したダブルクリックの防止策

特定のコンポーネントだけダブルクリックの対策を行いたいケースが出てくる。

state で制御しようとすると、逐一再レンダリングされるし制御はシンプルに行いたい。

そこで useRef を使ってみる。

https://ja.reactjs.org/docs/hooks-reference.html#useref

ドキュメントには

しかしながら useRef() は ref 属性で使うだけではなく、より便利に使えます。これはクラスでインスタンス変数を使うのと同様にして、あらゆる書き換え可能な値を保持しておくのに便利です。

これは useRef() がプレーンな JavaScript オブジェクトを作成するからです。useRef() を使うことと自分で {current: ...} というオブジェクトを作成することとの唯一の違いとは、useRef は毎回のレンダーで同じ ref オブジェクトを返す、ということです。

useRef は中身が変更になってもそのことを通知しないということを覚えておいてください。.current プロパティを書き換えても再レンダーは発生しません。DOM ノードを ref に割り当てたり割り当てを解除したりする際に何らかのコードを走らせたいという場合は、コールバック ref を代わりに使用してください。

とのこと、プレーンなオブジェクトを作成することで独立した形でフラグのように使用できるらしい。

アプローチとして下記のようにしてみた。

const App = () => {
  const isProc = useRef(false);

  const onClick = (e) => {
    if (isProc.current) return false;
    isProc.current = true;

    setTimeout(() => {
      // 時間のかかる処理など
      console.log("processing");
      isProc.current = false;
    }, 10000);
  };

  return (
    <button type="button" onClick={onClick}>
      ボタン
    </button>
  );
};

コンポーネント内で useRef のオブジェクトを生成し、必要な箇所でフラグ制御のようにする。