Top 3 Reasons to Use React

Last modified: February 21, 2018

React is one of the most popular front-end libraries for building UI components. It's developed and maintained by Facebook and has a very strong community backing it. While one size certainly does not fit all for JavaScript development, here are the top 4 reasons why you may want to use React over competitors like Vue and Angular for your web app.

1) The Virtual DOM

React is a library for building UI components. This means it must register changes from underlying data models and update the DOM to reflect those changes. Since redrawing and updating DOM nodes is one of the most expensive operations for web browsers, it's important that this is handled efficiently by whatever library you're using.

While traditional approaches to DOM manipulation involved redrawing entire nodes, React's revolutionary use of a virtual DOM utilizes a diffing algorithm to update only what's actually changed. This virtual DOM works by holding a copy of the real DOM in memory. Before any changes are made to the real DOM, the virtual DOM is first updated and then compared to it's previous state. While this may sound expensive, remember that the virtual DOM is really a JavaScript object. This means comparing and updating the virtual DOM is a lot less expensive than redrawing actual HTML nodes in the real DOM.

Through its reconciliation algorithm, React uses the virtual DOM to detect what nodes have actually changed and then updates the real DOM accordingly. This minimizes the amount of redrawing that needs to take place and drastically improves performance.

2) Components

In React, everything is a component. Each component has defined inputs or "props" that are passed in similar to data attributes. These props make components reusable as different values can be used with the same implementation. Each component internally manages its own state. Whenever a component's state or props change, it triggers the re-rendering of the component. This results in a unidirectional data flow that is more predictable and straight forward than alternatives (like AngularJS two-way data binding where models can update views and views can update models, leading to unexpected results). This makes state management easier as parent components can pass changes in state down to child components, etc.

Using a component based approach makes building UIs like playing with legos. Smaller pieces of code can be reused and combined to make larger components. This component based structure makes code easier to maintain, especially as your code base grows. It also improves state management as data flows in one direction.

3) A Growing Community

React is an extremely hot option today. It's backed by Facebook and has a strong community surrounding it. While React itself is simply a UI library, many supporting technologies like MobX and React Native have facilitated the growth of an entire ecosystem for full stack development using React. While the revived Angular 2 and emerging Vue.js are hanging in there, React is by far and away the most popular option and continues to grow.

Conclusion

React has a massive community backing it and isn't going away anytime soon. Its component based approach makes it easy to manage state and maintain a growing code base. This combined with React's revolutionary use of a virtual DOM makes it an ideal choice for modern UI development.

Responses:

StackChief LLC
February 26, 2018
great read!

You might also like: