Implementing Auto-Save with React

Over the past few months I have been slowly learning about modern web development. The last time I worked on a web project .NET 2.0 was the new hotness, so I have a lot of catching up to do. After checking out a few of the more popular frameworks out there I chose React as the framework for building web-based user interfaces. I chose React because of its popularity and support, tight focus on views and its affinity for functional programming.

A common feature in modern applications is support for automatically saving. This is seen in desktop applications like Microsoft Office, and nearly every mobile application out there. I wanted to see if I could replicate that behavior inside of a React application.

Challenge Accepted

The systems I have seen that implement this feature send a save event after every change. In a web application, this would generate a lot of network activity so wanted to try implementing this feature using an idle timer. The application starts the timer after any user activity and tracks changes to the form state. The timer resets every time there is user activity to prevent triggering a save while the user is still actively changing the form data. Once the timer expires, it fires an event where the application would perform the save functionality. In the case of my test applcation, it resets the tracking state and outputs a message stating that it saved successfully. The full application code can be found on GitHub in my react-auto-save repository.