Angular vs React Change Detection

As we begin a new project, we often encounter the question of which framework can best solve an immediate set of problems. Typically that decision comes down to understanding different languages, frameworks, and architectural patterns.

With React constantly growing in popularity, it's imperative that those looking to refresh their understanding of certain tools, or learn a new library, be able to transpose concepts between tools towards a similar outcome.

We'll be taking a look at how we can reap the benefits of better performance by comparing Angular and React Change Detection strategies.

The following concepts and examples assumes familiarity with Angular or React.

• What is Change Detection?
• Angular Change Detection
• React
• React Hooks

What is Change Detection?

Change Detection (CD) is the mechanism used to track and update changes in an application's state. The changes happen under the hood but effectively align the UI with the state of the app.

At its base, simple data structures are represented in the DOM and represent something to the user. By introducing different event types and enacting them with JavaScript, we can perform updates to these objects.

A simple counter track that takes a click to increase a value by one is an example of modifying an app's state via an event.

class Counter {
    _count: number;

    set count(value: number) {
        this._conut = value;
    }

    get count(): number {
        return this._conut
    }

    click() {
        this.count(1);
    }
}

Angular Change Detection

One of the features of the popular Angular framework is its Change Detection which, if not utilized effectively, can create performance hits on enterprise applications.

Angular Change Detection works by using Zone.js and activating after every async action performed. CD traversal starts at the root component (usually App) and works its way down the component tree updating the DOM as needed.

// parent component
@Component({...})
class CounterParentComponent {
    _count = 0;

    handleCountUp() {
        this.count++
    }
}

// child component
@Component({...})
class CounterComponent {
    @Input() count:  number;

    @Output() countUp = new EventEmitter()

    click() {
        this.countUp.emit();
    }
}

What makes Angular's CD beneficial is the ability to either omit components from re-rendering partially or entirely.

What's happening under the hood is that browser events are registered into Zone.js - Angular's mechanism for orchestrating async events - which emits changes after initial template bindings are created.

While Angular CD can be triggered manually, we can rely on it to trigger automatically.

@Component({...})
class CounterParentComponent {
    @Input() count:  number;

    constructor(cd: ChangeDetectorRef)

    handleCountUp() {
        this.count++
        this.cd.detectChanges();
    }
}

React

React's CD is different in implementation than Angular primarily due to its use of Virtual DOM (VDOM).

React CD is always updated whenever state updates occur whether in class-based components or function components. The render function of a class component or the return of function components is triggered with every state update. In every run of render, there is a "snapshot" of the VDOM. The new version of a snapshot is compared to the previous version, and patch-updated accordingly.

// clas component with render function
class CounterParentComponent {
    handleCountUp() {
        this.setState({ count: this.state.count++ })
    }

    render() {
        return {...}
    }
}

// funciton component with return
const Counter (props) => {
    const [count, setCount] = useState();

    const handleCountUp = (count: number) => {
        setCount(count++);
    }

    return {...}
}

React Hooks

In the latest implementation of React with function components, leveraging hooks like useState and useEffect make function components stateful, and allow for control when the app state is updated.

Conclusion

Learning to switch between app libraries and frameworks comes with a learning curve for each one. However, understanding core concepts about them helps in not only determining which is most effective for the task at hand, but the history of these changes as they impact our long-term development goals.

Angular and React have been big players in the field for many years. But as newer toolsets like Svelte, Vue, and Remix enter the arena, these concepts can be translated more fluidly.