Alberto,
Thank you for this post. I believe these days it is a very, very important question for js community.

However, I cannot agree with you. I believe the reason why js devs are using React, Angular, Vue, Jquery, Backbone, Knockout (please pick your favorite) is the same why PHP devs are using Zend, CodeIgniter, Slim, Symphony, or why any other devs are using any other framework/library: because we are lazy :)

Let’s just face it: we are lazy!

And we are always looking for a tool that will help us do more for less time/effort. And we prefer that tools (mostly) that help us more with that.
It’s not about the state at all, it’s about our time. But the truth is that everything has its price. Based on my experience I may say that the most of the time performance is the price you pay for using frameworks. And the more difficult framework is the more costly the price is. And React or Angular are definitely difficult frameworks.

Also, I cannot agree with the statement “keeping the state in sync with UI is difficult in vanilla js”. I am sorry, it is not. The way you described it above is very, very old school. But it’s not only about the JS itself, you totally forgot that there are HTML and CSS who can help you write UI (BTW this is one of the biggest issues of React mindset I believe: react-devs tries to implement everything in JS, but JS is only a part of web platform).

Please, check out this example of your tasks: https://github.com/soloschenko-grigoriy/custom-elements-simple-state
It’s vanilla js that keeps state and UI in sync. I believe this code is very light to read but I would love to hear feedback from the community. Please excuse me for any typos and so forth: I prototyped it very fast.

Additional features:
- XSS prevention (with no cost!)
- No dependencies. Like none of them. Even package.json is absent. Only one tiny-little polyfill to support Firefox (when they will implement Custom Elements this polyfill may be safely removed)
- No transpiling, web pack, browserfy and so on. It just works without this huuuuuge infrastructure (in a modern browsers of course, but it’s also possible to support IE11 just by replacing ES6 features. Custom Elements will work thanking polyfill)

“Areas of improvement”:

• Adding the store, subscribe, dispatch a-la Redux.
• As an idea: separate component to two generic components: “form” and “list” and combines them with a container.

And once again, please don’t take it personally. I like the React library but I think its time has passed. It was good in 2013–2015. But Web Platform is mature enough to forget such redundant stuff.