将表单数据另存为用户类型（React / Postgres）

Question

Given a simple textbox to answer a question, how would you go about saving answers as the user types? Assuming that the answer is upserted.

Using a somewhat naive example of an onChange handler and saving answers using an API within that onChange, I ran into two problems:

1. Sends what seems to be too many patch requests from client to API since it's every time the input textbox answer changes.
2. If using postgres upsert or creating your own, then the second request made by the onChange handler may not see the first if the user is typing quickly, creating duplicate records for that textbox (two answers for one question)
3. I need to execute queries beforehand to get necessary relationship values before updating, so the HTTP wait time is fairly long. Fixing this now, but seems to not address the above two issues.

I thought of only saving once the user presses spacebar, but that seems hacky. Normally of course I'd save after clicking a submit button, but in this case it must be as the user types.

Any suggestions / comments? Cheers.

EDIT:

Also tried saving within onBlur.. But this doesn't always get called depending on where the user clicks.

Answer 1

Does it have to patch the data for every keypress or can you use a delay?

For instance...

User starts typing: Register the event, set a timeout for say 3 seconds

If the user keeps typing: reset that timeout back to the full 3s

If the user pauses typing + 3s passes: patch the data with new value

When the user resumes typing: set another timeout