Recaptcha causing page rerendering

[isferrei]

Hello guys, I hope you can help me with this issue. Using the google recaptcha inside my page, is causing an ininity renderings on it, making a lot of posts to google api.

I'm not sure why its happening

[waleed1892]

Avoid using inline functions for onVerify it causes verification process to run continuously.

[jaandrews]

Inline functions aren't the cause of this. The following only calls the reload api once.

<GoogleReCaptchaProvider reCaptchaKey={recaptchaKey}>
     <GoogleReCaptcha onVerify={(token) => {console.log(token)}} />
</GoogleReCaptchaProvider>

I also tried it with an inline promise with the same result.

<GoogleReCaptchaProvider reCaptchaKey={recaptchaKey}>
     <GoogleReCaptcha onVerify={(token) => new Promise((resolve, reject) => {console.log('test');resolve()})} />
</GoogleReCaptchaProvider>

Problems started happening for me when I used the formik libraries' setFieldValue method. This returns a promise, but for some reason causes the component to repeatedly reload when used with the GoogleReCaptcha component. It's likely the same issue happens with that setValue method call. Not sure on a workaround for this at the moment, but it might be possible to avoid the issue by wrapping the recaptcha bits in another component. Might reload only that component then and not the whole form, though I suspect that won't work. Otherwise will need to roll a custom solution using useGoogleReCaptcha() to manually run the recaptcha calls.

[Keith-Hon]

fixed it by changing to onVerify={setRecaptchaValue} instead

[vahidei]

Use it like this: { !token && <GoogleRecaptcha onVerify={token => setToken(token)} /> }

[mleister97]

  const onVerify = useCallback((googleReCaptchaToken: string) => {
    console.log(googleReCaptchaToken)
    setToken(googleReCaptchaToken)
  }, [])

<GoogleReCaptcha onVerify={onVerify} />