React is the framework to adopt, according to The State of JavaScript 2018 survey. It has a satisfaction rate of 91 percent, with three fourth of respondents of the survey using it. NPM trends also say the same story with React’s downloads almost five times to its competitor frameworks like Vue and Angular.
And the obvious question is, Why? Why use React? What has made React grow so huge, and Why big companies like Facebook, Twitter, Airbnb, Netflix, Uber, Pinterest, and Udemy are betting on React? In this article, we are going to reflect on some of the reasons which make React the best choice for building modern front-end apps.
Image from The state of JavaScript, 2018 survey suggesting front-end frameworks to adopt, assess, avoid, and analyze based on user satisfaction and users.
What is React?
React is a declarative and component-based JavaScript library to create user interfaces. It is the design layer for web applications. It is owned by Facebook and a community of companies and individual developers. React can be applied as a foundation while developing mobile or single-page applications, as it is optimal for obtaining swiftly modifying data that must be recorded.
The features of React
Let’s have a look at some core technical features of React and how it differs from other frameworks.
JSX
JSX stands for JavaScript XML. Instead of using HTML templates to generate DOM elements, React uses JSX. JSX has a very similar syntax to HTML, and it provides encapsulation of logic and UI inside a component. It compiles down to JavaScript Objects using babel during build time. This compiled object is then provided to React.createElement function during runtime.
Here is a component that shows a random number on click using JSX looks like.
A React component using JSX.
Here is how the same component looks after compilation, which we can also write by hand but is not efficient and hence not recommended.
A component without JSX.
Virtual DOM
The declarative style of writing code in React is made possible because of virtual DOM. Before virtual DOM became mainstream in JavaScript frameworks, it was very inefficient to perform DOM operations, both for performance and developers.
Virtual DOM is a component-wise in-memory representation of DOM nodes that it has to render on real DOM. When a component is re-rendered, React diffs it with its previous representation and updates real DOM nodes which have changed. The whole diffing process is called reconciliation. In this process, React decides if it is efficient to create DOM nodes, update existing DOM, or to destroy previous and create a new one.
Source: https://almerosteyn.com/2017/11/id24-accessible-react-tips-tools-tricks#/22
State and Props
A component’s state holds the data based on which UI changes, for example, say when isLoading boolean is true, show a loader and if false show some other UI. You just update the state, React will take care of the rendering, that’s it.
But to make reusable components, there should be a way for a component to get data from outside; with props you can pass data to the component. Similar to state, if the props of a component change, React will re-render that component.
You may also like: React vs. Angular: How are they different?
Lifecycle hooks
Lifecycle hooks are methods provided by React, which are called at different phases of a component’s lifecycle. Say for example, when component mounts, you may want to initiate an API request. You can do that in componentDidMount, but that would be an async request, and you would ideally want to show a loader. So, the render method will be called just after that, and when the state changes after the API request resolve, it will render again.
As we have discussed some of the core technical features of React, let’s have a look at some other benefits of React.
It’s just JavaScript
The best thing I like about React is that other than JSX, everything that you do in React is just JavaScript. Classes, closures, handling events, or fetching API, everything you do is just JavaScript. If you already know JavaScript well, you will pick up React very fast, and you will like it. If not, writing code in React will make you a better JavaScript developer.
React seems less magic compared to other frameworks like Vue and Angular, where you can write for-loops and other logic in HTML tags.
Backward-compatible, Progressive enhancement
React is used much more internally at Facebook than Angular at Google. This is because Facebook runs from the master branch of React; it is guaranteed to be backward compatible.
Progressive enhancement means new features will include additive or optional and not a replacement of any existing API. And if there is any breaking change or API deprecation, React will lay down an efficient strategy to migrate existing code to use the newer version.
Great community support and packages ecosystem
React is backed by Facebook as well as adopted by some other tech giants and also used by millions of other small and medium-scale companies. That means most probably almost every problem or use case you encounter is encountered by someone else, and you might find a solution for it. Or you can get an idea based on existing solutions to solve your problem. And at last, you can ask people directly on StackOverflow, Reddit, Reactiflux, or Twitter.
Exciting things ahead
The average life of a JavaScript framework is 5 years. As per this belief, you might be thinking React’s popularity is going to fade away from here as it has already completed six years.
React has improved a lot from what it was 5 years ago without fundamentally changing anything. In recent updates, React has made some fundamental changes like hooks, which will not only improve app’s bundle-size, performance and developer experience but will also make sure that it survives in rapidly changing JavaScript framework’s world.
You may also like: ES5, ES6, ES7, ES8, ES9: What’s new in each Version of JavaScript
Let’s have a very quick overview of some new things in React and new things coming ahead.
Suspense and Lazy loading
Shipping the whole frontend app at once can potentially be a performance problem, especially if your app is huge. This can be avoided with code-splitting modules, that means fetching modules when they are required in runtime.
With React.lazy you can lazyload component like this.
A lazily loaded React component
I would recommend you to use dynamic import for route level component or huge dependencies which are only used in part of the app.
You may also want to show some loader when this dynamically imported component is being loaded. You can do that by wrapping it in a Suspense component.
Suspense captures promise anywhere in child tree thrown by React.lazy to show fallback content. You can have multiple Suspense components. The nearest ancestor one will be used to show fallback content.
React hooks
Hooks are a new way of components in React. With hooks now you can write functional components with state and lifecycle hooks. Functional components are more readable than class components. Also, the compiled size of functional components will be smaller than class components.
React hooks also solve other problems like wrapper hell, render props pattern, and consuming context. They also provide a much better way to separate reusable logic and serves as a base to simplification of API for other libraries like GraphQL Apollo.
Concurrent mode
The upcoming concurrent mode will provide React the ability to pause rendering and to work on different priorities. For example, say there is a search input, and you want your search input to be always responsive while the user is typing but if React is busy rendering some expensive UI on the low-end devices, it might start lagging. In upcoming concurrent mode, React will take care of these high-priority tasks itself.
Better event handling
In the ongoing Flare project, React is moving from an imperative way of handling events to a declarative way. If you have ever worked in React on something where you needed to manage, focus, or listen for hover events, especially from a child component, you know how hard it is. In the new declarative way instead of providing callbacks from parent to child event handlers deep down the tree, you will be able to code like this (experimental pseudo-code).
The new system will have some wrapper event components which will do a lot of heavy lifting for users. Like Press event component will handle some dozen of mouse, pen, touch and keyboard events and will be consistent between different platforms.
React also need this to support partial hydration, which is also one of another big thing coming to React.
Better debugging tools
The upcoming version of the debugger tool has some great features. Some of them are copying props from dev tools, being able to know why a component rerendered, hooks support, and better viewing of nested trees.
Cross-platform apps with React Native and Electron
Though you cannot use your React web app code as it is, you can use some of the components you write for web apps to make mobile apps using React Native and desktop apps using Electron. And of course, the philosophy of writing component-based apps remains the same on every platform.
React Native apps are real native apps and not just a wrapper around web apps to work on mobile devices. Facebook is recently pushing a lot harder than ever to make React Native even better.
Conclusion
If you have a small project, an inexperienced team and you don’t care how things are working as far as they are working, you should go for VueJs as it has the smallest bundle, the easiest learning curve.
If you know from upfront that this project is going to be huge, you want your team to learn TypeScript and strict them to follow a particular set of libraries and project structure, you should go for Angular, as it has huge bundle size, mandatory TypeScript.
And finally, if you are not sure of projects scale but it might go big, you want your team to be good JavaScript developer than magically doing things, you want to keep experimenting with new technologies like GraphQL, you might need battle-tested server-side frameworks Gatsby and NextJs or you love declarative code which you can share cross-platform then you know what you have to choose.
