ReactJS: auto save feature for any input field

I picked up ReactJS recently after a few years away from coding in Javascript at all. Since ReactJS is a powerful and useful framework with a lot of bells and whisles, in the midst of so many new things to learn, I lost sight of it being just a *javascript* framework. Yes, I can still use vanilla JS in my ReactJS app! (duh)

Here is one example:

My team wanted to implement a simple debounced auto-save function for our text box input. At first we used lodash's debounce to make it work. It seemed to be working and we launched it. But customers came back with a complaint that typing in the textbox appeared to be jittery. So, here is the old code:

This works when it doesn’t :) e.g. when a user is typing with an interval of about half a second between letters. The app would save the text, and re-render the textbox with the saved text while discarding what they have typed *after* the saving.

To fix the bug, I opted to using vanilla JS’s setTimeout as follow:

Here we go. Auto-save works now! The AutoSaveDisplay component you saw above is only a cherry of top bonus to display “saving…” and “saved” when it’s saving your text.