Simplicity of React.js

There’s a lot of interesting concepts in React.js. All of them change the way in which we build interactive web applications.

One of them stands out the most. The functional approach to rendering HTML. In React.js, you can know what given component will render based on the properties it is supplied with.

It makes React.js component into a side-effect free function (which is not totally true in practice, but on that later). It’s easy to know exactly what will happen. That directness and simplicity helps greatly with building software. It’s the big appeal of functional languages.

In the latest React.js (0.14) you can even create components which are only functions. They are called stateless functional components.

Now we can build rich UI from simple functions.

The state (but not this.state) is exposed and explicitly passed to the component. You can easily inspect it, which helps with debugging.

The concept of the local state (this.state) breaks to some degree that nice property. Now the component depends not only on the properties passed to it but also by the internally kept state. The final output depends on two sources of the state.

This unfortunate break from the clean solution should be avoided when possible. But I admit it makes certain common UI patterns much easier to build. It would be possible to build show/hide functionality without it, but it would be more tedious.

In practice the fact that there is localized state is not that problematic. It is neatly tucked away in a class itself. Properly encapsulated. It doesn’t (or, at least, it shouldn’t) directly influence the global state of the application. And with that the properties of the component itself.

The idea of making components into pure functions of the global application state is very powerful. It allows building more complex solutions without the usual mess of the implicit state.