HCaptcha Causes Too Many Re-renders Crash

[alphonso06]

Details

I have a page that fetches data from some API. For some reason, this page works absolutely fine, complete with its form fields, without HCaptcha. But whenever I put it in, React says it's causing too many re-renders.

The flow is simple, I use a useEffect() hook to fetch the data, and once I get that, render the page - by that I mean I set the loading state to false from its initial value of true. Nothing fancy about it but it was functional.

For added context, I was able to get this working in a smaller contact form page. And I've been trying to isolate and recreate this issue with a fresh project, but to no success. I'll update this post with a sandbox whenever I figure out how to recreate the issue. For now it's quite baffling to say the least, my only fix is to not use HCaptcha, but that obviously defeats the purpose of having a captcha in the first place.

[e271828-]

That's a new one, not obvious what could cause that. Please post a minimal repro when you've got it.

[alphonso06]

Sandbox

Right here

Some Info

I think I figured out what was causing the re-renders crash, it's because I was calling the hook to change the token state directly at onExpire instead of providing a function that changes the state.

This works

<HCaptcha
   sitekey={siteKey}
   onVerify={setToken}
   onExpire={() => setToken(null)}
/>

This causes too many re-render crash

<HCaptcha
   sitekey={siteKey}
   onVerify={setToken}
   onExpire={(setToken(null)}
/>

What's weird though is that it works just fine on one implementation that I wrote, but it looks like this is the wrong approach. I'll close this now as I think it's really more of my mistake.