By: Yohanes Ricky Andika Pradana, Analyst at Mitrais
Why Use React?
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
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:
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