Ξ

The Limits of React

Published on 2017-10-10 code js

React has already proved that it is much more than a fad: It has fundamentally changed the way we thing about client-side rendering. This makes it all the more important to think about its limitations.

So what is react?

Before react, we would interact with the DOM directly. We would add, remove, and change DOM nodes as we liked. This worked well enough, but it could become messy real quick.

The big idea in react is to separate the application state from the DOM that is rendered from that. A very simple version could look like this:

var someEventHandler = function(event) {
    state.myValue = event.target.value;
    document.body.innerHTML = template.render(state);
};

So whenever something happens, you change the state and re-render the complete DOM. This has two obvious issues:

In order to improve the situation, DOM-diffing was introduced. This means that instead of replacing the DOM completely, only the necessary changes are made. This way most of the DOM state is preserved. Note that there are now three render steps: Rendering the template, diffing, and applying the changes.

Performance was improved by introducing several caching mechanisms as well as a virtual DOM which is optimized for fast diffing. With these optimizations in place, it was decided that the remaining overhead was small enough for modern hardware.

So what are the limts of react? There is a performance overhead, but it is small enough in most cases and you can add more caching if necessary (though it is not trivial). In terms of DOM state, react does much better than the simplistic code example I included above. Still, it activly tries to keep you away from the DOM, which makes managing something like focus manually a pain.