Angular vs. React: Change Detection
How Angular and React differ in their change detection strategies
This is my second piece in the Angular vs. React series. Find the first piece, on component communication here.
In this piece, I’m going to discuss how Angular and React differ in their change detection strategies. My aim is to build your intuition around this topic.
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
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
- A network event (like an incoming HTTP response from the server).
Notifications about timing and network events are made possible through a library called
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.
- 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.
- After bindings have been created, Angular only deals with the bindings for CD and not with the entire application code.
- Now, when Angular is notified of an event, all bindings are re-evaluated. This process is called dirty-checking.
- The binding for which a property has changed is marked as updated (or dirty).
- Next, the DOM is re-created with the latest bindings.
- By default, Angular scans all the bindings each time an event happens, to look for changes.
Change Detection in React
When the props to a component or the state of the component changes,
render() function is called, by default.
render() is called, React’s CD runs.
- Each time
render()is executed, React creates a virtual DOM object based on the JSX returned by
- 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.
- 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.
- React considers dirty only those components for which the state/props changed.
- 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?
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.
So much for the high-level overview of CD in Angular and React!