React rerender causing multiple captcha solves

Following the Example in the Documentation#react-example, we are seeing issues with auto-solving captchas following re-renders from react.

Calling destroy() instead of reset() seems to fix the problem, but I feel like either the js implementation in the friendly-challenge lib is somewhat irregular or the documentation/example for react is incorrect. I also say “seems”, because I fear side effects caused by calling functions not clearly defining their side effects. (What is destroy anyway, and why do we need it explicitly (compared to a captcha in a “solved” state)?)

I think the re-render issue stems from this line in the reset() function, especially in connection with startMode="auto", as it immediately restarts the solving process: https://github.com/FriendlyCaptcha/friendly-challenge/blob/87282feb6f494a9dfd1fd2378f9abc097411c740/src/captcha.ts#L294

[MauriceArikoglu]

Thank you @merlinfuchs

[merlinfuchs]

I think using .destroy() instead of .reset() in the cleanup function is actually the correct thing to do. We are not re-using the same Widget instance so using .reset() will start solving a puzzle in the old Widget instance which isn’t attached to the DOM anymore. This can also lead to doneCallback being called multiple times. (once from the old instance and once from the new instance)

I’m pretty sure this isn’t a bug in the widget implementation, the react example is just using the wrong function to do the job. (vue example, and nextjs examples as well btw) We should either re-use the same widget instance or replace reset with destroy in the examples. There isn’t really a benefit in re-using the same widget instance atm (the workers are terminated anway) so I would suggest to just use .destroy().