React For Web Development
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.
What is React?
The features of React
Let’s have a look at some core technical features of React and how it differs from other frameworks.
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 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.
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 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.
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 are coming ahead.
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.
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.
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.
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.