Angular 5.0 change detection strategy VS React's change detection strategy

Question

I understood how change detection works in Angular 5.0.

Can some one help me to understand how the same works in React and how much it was different from Angular's ?

Answer 1

React and Angular’s change detection are different, but they have in common one very important thing - making diff of current and previous state from memory (not from DOM) and rendering only what has been changed.

In Angular, on high level it works like this:

1. Change detection is triggered by zone.js at the end of each call stack in the zone. 
It means that after callback to every async action (click, http request, timeout) is executed, change detection is triggered.
 You can trigger change detection also manually, or even „turn off” zone.js, but let’s stick with most common scenario.
2. Change detection starts from the root component and it goes down through the components tree (again, You can trigger it manually on any component, but that’s not the most common case).
3. Traversing components tree, it checks which values in component templates need to be updated and updates the DOM.

NOTE: Mind that if You use ChangeDetectionStrategy.OnPush, some components and its descendants might be omitted during tree traversal. It can be great optimization.

In React it looks like this:

1. Change detection is not triggered after callbacks of async actions. It’s triggered by calling method setState on component.
2. Change detection starts not from the root component, but from component in which setState was called.
3. Reconciliation phase begins - component and it’s descendants are traversed for checking which values needs to be updated in real DOM. So, conceptually, this point is very similar to Angular. However in React 16 it’s a little bit more complicated. Check it.
4. Dom is updated.

NOTE: Similar to Angular’s ChangeDetectionStrategy.OnPush, in React we have class React.PureComponent. We can use this class to avoid unnecessary change detection.

Of course there's lot more differences, but on high level, I think those are the most important.