By: Yohanes Ricky Andika Pradana, Analyst at Mitrais
Why Use React?
React is a declarative, efficient and flexible JavaScript library for building user interfaces.
React is the most famous library created by Facebook. React’s core objective is to help develop front-end applications efficiently by re-using the declarative plugins.
So what are the advantages of using React for front-end development? Here are three of them:
React is super fast
First, React applies the idea of uni-directional data flow, which means for each update cycle React will:
- take inputs to components as props and conditionally render DOM updates everytime the data has changed for every specific DOM. Updating any data during this phase can’t retrigger the rendering process until the next drawing phase.
- automatically delegate DOM events to a single event listener at the root of its DOM tree. Event listener and data updates are available in the response.
This approach is different to two-way data binding, which will directly update the data everytime there is any change to the DOM (e.g.: in Angular 1 and Knockout implementation). Two-way data binding could retrigger the drawing phase before it’s finished, which will have an impact on performance. In a diagram, here is what the uni-directional data flow approach looks like:
Flux is the architecture which complements React’s view components. Flux ensures uni-directional data flow is applied properly. In the diagram above, React’s component is displayed as Controller View. In one-way data binding, the components perform extremely fast, as the changed elements are in the DOM (only the virtual DOM elements which are different to the actual DOM elements are updated). The process basically produces smoother updates.
Meanwhile, in two-way data binding (which is applied in Angular 2), whenever the DOM’s value is changed, both the view and model will be updated respectively. This behavior requires a lot of observers, and since each binding needs a watcher, if the app is getting bigger, those watchers will get bigger as well. For more information, there is a benchmark comparison in this link.
No need to learn a new syntax
Secondly, React uses JSX. JSX is an HTML-like syntax that compiles down to JavaScript. React uses JSX because it doesn’t have to use template. Moreover, it has support for many of the tools like ESLint, Babel, etc.
In summary, Angular 2 continues to put “JS” into HTML, while React puts “HTML” into JS. Furthermore, React is unique in its syntactic and conceptual simplicity. Consider iterating in today’s popular JS frameworks/libraries:
All except React use framework specific replacements for something that is native and trivial in JavaScript: a loop. React embraces the power of JavaScript to handle markup, so no new syntax is required.
Debugging is easy
The third advantage is that React explicitly shows the error location. Whenever there is an error on the JSX, it won’t compile. It will immediately fail the compile process if there is a missing tag or reference. Indeed, the JSX compiler specifies the exact line number where the error occurred. In contrast, when there is a variable reference mistype in Angular 2, nothing happens at all. Angular 2 will show nothing during compile-time, but will fail at run-time. This behavior radically speeds up the development process.Pict 2. React handle missing tag
Conclusion
Based on the three advantages above, React is one of the best solutions for developing a front-end project. Since React implements uni-directional data flow, React will be more speedy in performance. In React, there is no need to learn a new syntax, because React fully embraces JavaScript. And the last but not least, React is easy to debug which will speed up the development.
