CODEWITHSUNDEEP
node.jsreactjsmongodb
keenlabi
keenlabi

Reputation: 331

Synching check for email existence on the database with input field

I have a react app that during signup, user will enter their email and while typing API calls will be made on each keypress (if email is valid) to check if the email has previously been registered and send back a success response if it is not.

ISSUE: The problem I have is the speed of the API connection is not always reliable as in a slow network, for instance, if user types "[email protected]", "[email protected]" will be checked for and the success response will be for that email "[email protected]", hence they won't be able to verify it later on.

SOLUTION I TRIED: use a controlled input field and on every server response, replace the text inputed by the user with the email that the last verification was made for so users can see what email was just verified but it sucks as if users go back to change a letter or something it starts misbehaving and moving the cursor.

I'd appreciate any suggestions.

Upvotes: 0

Views: 60

Answers (1)

Jlewis071
Jlewis071

Reputation: 175

How are you performing the API call? If you use something like tanstack/react query (https://tanstack.com/query/latest) and have the query key be derived from the current input email address, you should be able to rely on using the query result to determine when the API call has finished for the current input.

for example,

const validEmailQuery = useQuery([currEmailInput], /* fetch logic etc here */)

Upvotes: 1

Related Questions