Angular vs. React: Change Detection

Angular vs. React: Change Detection

Angular vs. React: In this post, I’m going to discuss how Angular and React differ in their change detection strategies.

In this post, I’m going to discuss how Angular and React differ in their change detection strategies.

A basic knowledge of both React and Angular is a prerequisite for this article.

Let’s get started.

What is Change Detection (CD)?

CD is the process of detecting whether the application’s UI should be updated (and, if so, which parts to update) when changes to the underlying model come in through user interaction or through the network.

Change Detection in Angular

Initiation

The process of CD is initiated any time one of the following happens:

  • An event generated by the user in the UI, like a button click, form submission, etc.
  • A timing event like setTimeout.
  • A network event (like an incoming HTTP response from the server).

Notifications about timing and network events are made possible through a library called zone.js.

Now, whenever any of the above events take place, Angular:

  • gets its notification by intercepting the event listener function.
  • schedules a CD cycle to be run after the application code has finished updating due to the event.

The Process

  1. When Angular first processes the application code, it makes a note of all associations between the HTML properties and the TS (or JS) properties. Then it goes about creating what can technically be called “bindings” (for each HTML-property-TS-property association). A binding is basically a set of instructions.
  2. After bindings have been created, Angular only deals with the bindings for CD and not with the entire application code.
  3. Now, when Angular is notified of an event, all bindings are re-evaluated. This process is called dirty-checking.
  4. The binding for which a property has changed is marked as updated (or dirty).
  5. Next, the DOM is re-created with the latest bindings.
  6. By default, Angular scans all the bindings each time an event happens, to look for changes.

Angular vs. React

Bindings between HTML and TS properties

Change Detection in React

Initiation

When the props to a component or the state of the component changes, render() function is called, by default.

Every time render() is called, React’s CD runs.

The process

  1. Each time render() is executed, React creates a virtual DOM object based on the JSX returned by render(). The virtual DOM is called “virtual” because it’s a replica of the real DOM — a lightweight JavaScript replica object representing the data structures and data of the component.
  2. Subsequently, each time render() is executed, a new version of the virtual DOM is created. This latest virtual DOM is compared with the immediately previous version, using a diffing algorithm.
  3. The diffing algorithm comes up with the minimum number of steps to update the real DOM, in O(n) time, making it really efficient. Based on whatever changes were detected by this diffing algorithm, a patch is created and scheduled to be applied to the real DOM.
  4. React considers dirty only those components for which the state/props changed.
  5. CD cycles are batched. This means that while React is busy updating the real DOM, all the CD requests that come in are batched together and are brought into effect only after the previous DOM update cycle has ended.

What about the Virtual DOM?

Updating the real DOM is much more expensive and time-consuming than updating the virtual DOM. This is because, while the virtual DOM is a lightweight JavaScript object (and it’s quick to update), updating the real DOM involves a lot of other processes too. Processes like processing and applying the CSS, setting the exact coordinates of all elements on the screen, traversing the DOM tree, rendering it, etc.

Summary

CD is the process by which the application’s UI and model stay in sync with each other.

Angular creates bindings between the HTML and TS, intercepts the calls to the registered event listeners, processes all bindings, and updates the DOM.

React keeps an eye on render(). As soon as the latter is invoked, a virtual DOM object is created and compared with the previous version of the virtual DOM. Changes are calculated, batched, and a DOM update is scheduled.

angular react

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Angular vs. React: Which Is Better and How?

We are living in a technology-mediated world. And, here, we want our hands on the best technology to develop apps. Speaking about the same, we often find ourselves between the simmering debate, what is better between the two- is it Angular or React?

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.