fix: login recaptcha

[alexevladgabriel]

The token state was not updating on verification process immediately, instead using useState was replaced with useRef.

[matthewpi]

I believe I noticed this when I had reCaptcha enabled but I always disable it in my dev environments for obvious reasons, but I'm wondering why this change is required for develop but not 1.0-develop. Both have identical code; could it be due to React 18 running hooks twice? If so, this change should go into 1.0-develop, then develop assuming it doesn't break 1.0.

[alexevladgabriel]

I believe I noticed this when I had reCaptcha enabled but I always disable it in my dev environments for obvious reasons, but I'm wondering why this change is required for develop but not 1.0-develop. Both have identical code; could it be due to React 18 running hooks twice? If so, this change should go into 1.0-develop, then develop assuming it doesn't break 1.0.

What I had observed was that when calling onVerify function the state to update the token was not running concurrently and being later executed. Setting a timeout for the submitForm function would solve the problem without using refs, but doesn't feel a good practice for me.

Found this:
Much like .setState() in class components created by extending React.Component or React.PureComponent, the state update using the updater provided by useState hook is also asynchronous, and will not be reflected immediately.

Also, the main issue here is not just the asynchronous nature but the fact that state values are used by functions based on their current closures, and state updates will reflect in the next re-render by which the existing closures are not affected, but new ones are created. Now in the current state, the values within hooks are obtained by existing closures, and when a re-render happens, the closures are updated based on whether the function is recreated again or not.

[Danieljunek17]

btw this does fix the problem in the development branch and should be merged