search

altcha-org / altcha-starter-react-ts

0 stars 1 forks source link

Altcha firing "verified" state multiple times #4

Open roivasxxx opened 2 days ago

roivasxxx commented 2 days ago

Hello, I forked the repo and I was playing around a little. I've noticed this thing, where if we pass a memoized function to the widget, which is used in the dependency array of the component, and we update some state (count in my example), this function depends on, and then we try to verify via the Altcha widget, it fires the "verified" event state twice (+calls the function twice, first with the initial state value, then the newest state value). I guess the reason for this behaviour is that the initial listener is not removed (?) and then the listener fires for both the initial listener and the newest listener. Is the reason for this just me not understanding how to properly remove the event listener?

How to replicate:

  1. clone the forked repo
  2. update the state via the increment button (might take a couple of clicks)
  3. click to validate altcha
  4. observe the console - it should log the "verified" event twice -> calling the memoized function twice

I added a regular document click listener to see if it would actually get removed properly - seems that it does - since it actually only logs once (??).

Could anyone help me get this to work? This is just a simplified example of what my app should be doing (call a memoized function once it gets verified)

ovx commented 1 day ago

Hi, I think this is because of react's strict mode (https://react.dev/reference/react/StrictMode), if you try disable the strict mode, it should work fine. I'm not sure why the listener isn't removed properly, any help here is welcome.

roivasxxx commented 1 day ago

Hello, yeah I forgot to mention that removing strict mode or well.. just doing a prod build (so no strict mode) actually does help. I'm just really curious as to why the listener would not get removed with strict mode. Thought that it might just be React screwing up web components (made a simple checkbox wc that emits an event once checked, tried a wc with shadow dom/without - listener was properly added/removed with the same setup).. So I am really lost as to what is actually going on.. Also checking the event listeners of the element in the browser console also clearly shows that there is one event listener...

Forgot to mention that this happens on 0.9.0 (same as in the example) and 1.0.0