react-hcaptcha icon indicating copy to clipboard operation
react-hcaptcha copied to clipboard

fix(mount): Handle multiple calls to componentDidMount

Open brdlyptrs opened this issue 2 years ago • 0 comments

Closes https://github.com/hCaptcha/react-hcaptcha/issues/189

Reason

It seems that componentDidMount is called multiple times when using functions like useNavigate, resulting in hCaptcha's render function to be called multiple times as well (see screenshot). A single hCaptcha element is only allowed to render once in an element, which results in the error outlined in the linked issue.

Note: This seems to be an issue with React.StrictMode as well, see StackOverflow

Result

Add check to validate hCaptcha has already been created to prevent calling hCaptcha.render again if a component already exists.

Evidence

image

brdlyptrs avatar Jun 27 '23 20:06 brdlyptrs