Recaptcha not appearing in React Form initally

Question

I've run into an issue in my React project where the Google reCaptcha I want to include at the end of a form does not initially appear. If the webpage is refreshed, it appears as expected, but if a user navigates to the form naturally through the site, it is missing and the form cannot be completed.

Even when stripping down the code to the bare minimum like so, the recaptcha does not appear until the page is refreshed:

import React, { useRef } from "react"
import ReCAPTCHA from "react-google-recaptcha"

const RecaptchaTest = () => {
  const captchaRef = useRef(null)
  return (
    <div>
      <ReCAPTCHA
        sitekey={process.env.GATSBY_RECAPTCHA_SITE_KEY}
        ref={captchaRef}
      />
    </div>
  )
}

export default RecaptchaTest

I believe that the issue may have something to do with the appropriate google cookies not being generated in time but have yet to find a proper solution. Could it have something to do with the react-google-recaptcha package? Any help or advice would be greatly appreciated. My site was built using Gatsby.

Answer 1

One solution is you can try onloadCallBack prop that will trigger only after loading the reCAPTCHA

ref={captchaRef}
 asyncScriptOnLoad={() => 
{ console.log("reCAPTCHA loaded successfully") }} />