State control is not simple when you have many moving parts. A very good solution (which both Angular and React bring to the table without destroying performance most of the time) is to remove all the moving aspects to the parts. This doesn't matter in microbenchmarks, but in real apps, having something be slightly slower but bug-free is better than fast but wrong.
function constructor(spec) {
let {member} = spec,
{other} = other_constructor(spec),
method = function () {
// accesses member, other, method, spec
};
return Object.freeze({
method,
other
});
}
All application state can be stored in a single "Atom" (i.e immutable data) and all message passing can be achieved through CSP channels.
When dealing with the DOM, 'incremental-dom' is a nice option.
Of course, separating pure functions from side-effects inducing code is key to maintaining control.
This is my approach when going "framework-less".