React vs Angular – A Quick Comparison (2021 Update)
Introduction
The situation in the world has changed in the last year which only boosted the digital transformation for many companies wanting to thrive and survive in the new order. These companies joined the others and started looking for solutions to fix their situation, and need to make hard business decisions fast. One of these decisions, connected in some way with digital transformation, is choosing technology to start building (or expanding) an online business.
Some of them will decide to build a web application. The choice may be overwhelming because of the number of options but as we want to help you, today we will limit these options to React and Angular, which are one of the most popular dilemmas nowadays.
You will find out about pros and cons of each one of them, and differences between them.
What is React?
React.js is an open-source JavaScript library for building performant and visually attractive user interfaces. It combines development simplicity (thanks to small pieces of code called “components”) and a strong focus on user experience. React is the View layer of the MVC model, which gives you almost total freedom of choosing Model and Controller libraries.
Pros and cons of React
Now, let’s take a look at some advantages of React from a business perspective and its cons.
Pros | Cons |
Cost-effectiveness | High pace of development |
Great UX | Incompleteness |
Popularity | |
Performance | |
SEO-friendliness | |
Shortened time to market |
If you want to find out more, we prepared a detailed summary of React JS pros and cons, which you can read here.
Companies using React
Facebook isn’t the only company taking advantage of React and its possibilities. There are a few more well-known brands, such as:
- Airbnb
- Netflix
- Slack
- Udemy
However, it doesn’t mean that React is the right choice only for big brands – it’s on the contrary. You can use as little (or as much) of React as you need at the moment. For example, adding React to your website is literally a matter of one minute.
What is Angular?
Angular is an open-source framework created by Google for building web applications. While React is based on JavaScript, Angular is based on TypeScript. And unlike React, Angular is a full-fledged MVC framework so once you learn it well, you won’t need other solutions.
Angular is a result of rewriting AngularJS, which was the first version of Angular.
Important note: Google won’t support AngularJS after June 30, 2021.
Pros and cons of Angular
You already have learned about React.js pros and cons, so it’s time to find out why it’s a great idea to choose Angular (or not).
Pros | Cons |
Better error handling | Huge size |
Cleaner code than in vanilla JS | Limited SEO options |
Custom directives | Performance |
Higher performance | Steep learning curve |
Material Design-like interface | |
Seamless updates thanks to Angular CLI |
Companies using Angular
- Forbes
- General Motors
- Nike
- Paypal
- Telegram
- Upwork
React vs Angular: Head-to-head
React | Angular | |
Developed by | ||
Programming language | JavaScript/TypeScript | TypeScript |
Compatibility | Full backward compatibility | Updates needed |
Data binding | Both one-way and two-way bindings | Both one-way and two-way bindings |
DOM | Virtual DOM | Real DOM |
React vs Angular: Comparison
Building mobile apps: React Native vs NativeScript
Choosing React allows you to use React Native to build truly native and cross-platform mobile applications. While RN uses a bit different syntax than React does, it’s relatively easy to learn it if you are already familiar with React. With React Native, you can create components and bind them in Objective-C, Java or Swift code.
Angular, on the other hand, uses NativeScript, which is a framework for building native iOS and Android apps with the use of JavaScript and Angular.
When it comes to the performance of both applications, if they are well-written, the difference will be hard to notice.
Data binding
Both React and Angular are using both one-way and two-way data bindings. Two-way data binding means that whenever you change any element of the interface, your model state changes automatically, too.
One way data binding, on the other hand, renders the change in the interface model only after the model state is updated first. And whenever you change the UI element, the model state stays the same with no changes.
So, in the case of data binding, it seems like a draw because one-way data binding is preferred.
Learning curve
Since React is a lightweight UI library, it’s much easier to learn than Angular. A list of things you have to absorb is quite short: JSX, a router library and state management library. Also, it’s necessary to have knowledge of writing components, managing internal state and using props.
Angular is not a library – it’s a fully-fledged MVC framework. Because of that, a list of things to learn is much longer than in the case of React.js:
- TypeScript
- Components
- Decorators
- Dependency Injection
- Modules
- Pipes
- Services
- Templates
And that’s just a start.
Popularity
The popularity of any particular programming language or web technology can be a great source of information – especially if such popularity is measured objectively and over time. Looking at these stats will help you with gathering answers to questions like:
- Is there (and will be) demand for this technology?
- Will it be easy to find and hire developers?
- Is it something worth checking or just a waste of time?
To determine the popularity of React and Angular, I checked Github, Google Trends, and Stack Overflow Annual Survey.

Since 2019, React.js lost its first place to ASP.NET Core, but it’s still at the top. Angular, on the other hand, stayed in the middle.

React on GitHub

Angular on GitHub



Speed
DOM
React is using a virtual DOM, which means it doesn’t have to update all the HTML. He is just looking for the differences between the current and the old HTML and updating it accordingly.
Angular is using real DOM, which means it is going through the entire structure of HTML to find what there is to be changed and “mutate” the tree to apply changes.
React Concurrent Mode
According to official React’s website, “Concurrent Mode is a set of new features that help React apps stay responsive and adjust to the user’s device capabilities and network speed”.
However, they are still experimental and not a part of stable React release. Developers can try them in an experimental build.
React Fiber
A while ago (with v16 version) React changed its engine elevating the speed from “just fast” to “blazingly fast”.
More than that, React Fiber enables the priority-based update system, so you can fine-tune your renderings to make sure the most critical updates are done first. Also, you can pause and start your work at will.
Angular Ivy
As some kind of response to React Fiber, Ivy is a complete rewrite of the compiler so Angular developers can:
- Achieve faster build times
- Get smaller build sizes
- Unlock new features like lazy loading of components instead of modules
Templates
HTML
Angular is using templates based on an extended version of HTML with Angular directives. You will also have to learn a specific syntax.
JSX
With React, on the other hand, all you need is JavaScript knowledge. A JSX is a genius component made from markup and JavaScript logic in the same file. Thanks to the use of XML-like language, you can write your markup in your JavaScript code, so everything is in one place, and the code completion works better.
Testing
React uses Jest (sometimes together with Enzyme – JavaScript testing utility). Jest has a powerful mocking library, doesn’t require any configuration and is included in every React project. However, nowadays using react-testing-library is more common and practised.
Angular uses Jasmine, which outcome is considered by many as one of the hardest to read and too complicated.
What’s next?
If you are still not sure about choosing between React and Angular
Tomasz Grabski
Posted onGuys, thanks a lot for all the comments. I’ve just released the updated version with all your remarks taken into account. Thanks for staying tuned!
Anon
Posted onPerformance and size in Angular is not an issue anymore as of December 2020. Also react has full backward compatibility? Are you sure there's no breaking changes where "update is needed" between version upgrades? Their documentations here https://reactjs.org/blog/2020/08/10/react-v17-rc.html doesn't say so.
Miro
Posted onThere are too many mistakes and strong opinions in this text to mention. Please check your resources again. Angular supports both one-way and two-way bindings. The recommended one is one-way, actually. Equivalent to ReactNative is NativeScript by Progress. Ionic exists both for React and Angular and gives you PWA on top of the mobile. And it's using Capacitor now, not Cordova. Angular does not compare full real DOM as stated but compiles templates to instructions for almost surgical DOM replacements (more insights on inDepth.dev). This actually gives it an edge over React, since Virtual DOM has known limitations (you can watch talks by Rich Harris and Evan You on the topic). Since mentioning React Fibre, you could have mentioned also Angular Ivy. There are several pros for React over Angular (in certain projects). Sadly, you missed most of them.
Bojan
Posted onMin bundle size in 2020 (with Ivy enabled) is way smaller. Make sure to update that.