reCAPTCHA v3をReact Hooksで実装する - Uzabase for Engineers

こんにちは。 NewsPicks Web Product Unit の芥川（@aku11i）です。 NewsPicks の新Webフロントエンド基盤でNext.js・TypeScriptを使用した開発を行なっています。 今回、プロジェクトに reCAPTCHA (v3) を導入しました。 読み込みタイミングなどパフォーマンスに気を遣った実装をすることができましたので紹介したいと思います！ 実装方針 読み込みタイミングを制御する 外部ライブラリを使用しない React Hooks で実装する 使い方 事前準備 実装 解説 読み込み処理(load) 読み込みを待機する(ready) 非同期問題とその対策 action を実行する(execute) reCAPTCHA の読み込みタイミングについて おわりに 宣伝 実装方針 reCAPTCHA を導入するにあたり、次のような方針を立ててみました。