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.

.net activemq adapters akka amazon amqp apache api appfabric architecture authentication azure biztalk bpm caching camel cep cloud cloud computing cqrs data formats design eai edi esb esb toolkit events governance hateoas html http hypermedia integration java jax-rs jms json linked data links linux mapping masstransit media types messaging microdata monitoring msmq mule node.js nservicebus oauth odata open source orchestration patterns powershell pubsub python queues rabbitmq rdf rdfa resources rest resteasy routing rpc ruby security semantic web service bus services sesame signalr soa soap sparql spring streaminsight testing topics transactions transformation uri versioning videos wcf wcf data services wcf web api web web api web services websockets wf windows workflow xml xsd zeromq