The thing I enjoy about frameworks like React is the declarative nature of the UIs.

I'd love to not be able to use them and to create complex UIs in pure JavaScript but it always ends up being painful where you spend more time optimising the rendering than doing any work.

In simple apps I will write UI in a functional matter in pure JavaScript, regardless of the performance implications. But bigger DOM means worse performance with this method.

When will we get to the point where we can tell the browser what we want the DOM to look like and then the browser does the diffing like a framework would?

There’s absolutely no way you’ll have worse performance with this vs React. The app is modifying the target elements directly, not recreating the whole page with innerHTML. React will do the same amount of work at a minimum, and that’s after rebuilding the whole tree and diffing it.

The main bottleneck here are the synchronous localStorage calls happening in the render path, they could be moved to a separate timer.

One way React can be faster than hand-written code is by batching all dom manipulation into animation frames.

Handwritten JS could also batch DOM manipulation (without the need for virtual dom comparison).