Angular vs. React: Change Detection

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.

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