Increasing Performance Of Angular Apps Through Change Detection And Component Reusing

Whether you are building enterprise applications, progressive web apps or e-commerce apps, there are many methods for enhancing your Angular application’s performance. Some of the best ways for achieving high-performing and more efficient Angular apps is through change detection and component reusing. You may be wondering how change detection works in Angular or how to build reusable components. This article will explain the process, outline key strategies, as well as provide tips and best practices for your process to make it easier to accomplish your goals.

What is Angular Change Detection?

In essence, change detection in Angular is the process of detecting when data changes in any app component. The JavaScript framework automatically updates the Document Object Model  (DOM) and re-renders the view, displaying the changed values/objects to end-users. Here are the most basic ways in which you can trigger change detection:

• Manually (implementing the so-called OnPush Angular Change Detection strategy).
• Through common browse events (that occur when a user clicks on a button somewhere on a web page, for instance) or an asynchronous function.

A few quick facts to remember:

• Your UI is synced, meaning that Angular always keeps the component and the view synchronized.
• It does so with a change detector for each component that reads the binding on a template.
• This change detector is created when the application is started.
• Angular walks the app’s component tree from top to bottom.

Angular Change Detection Strategies Explained

There are two Angular change detections strategies:

• Default strategy
• OnPush strategy

The process behind the Angular Default Change Detection strategy unfolds in the following way – for any change in any model property, Angular will run change detection traversing a component tree to update the DOM. You can manipulate the change detection tree using the following built-in methods provided by the ChangeDetectorRef class:

• markForCheck()
• detach()
• detectChanges()
• checkNoChanges()
• reattach()

With Angular OnPush, it runs a change detector only when a new reference is passed to the component. If observable is passed to OnPush, then Angular ChangeDetector must be called manually to update the DOM. 

Here is an Angular change detection example with OnPush.

We recommend using the OnPush Angular Change Detection strategy if you aim to optimize the performance of your Angular application. Angular OnPush strategy will reduce the unnecessary checks in child components which will make the whole application significantly faster. It checks for a change internally and stops all input reference variable updates from running change detection. If a component is not changed, the change detection won’t go through it.

If you seek a more detailed explanation on how change detection in Angular works, read What Is Angular Change Detection & Change Detection Strategies.

The second approach for optimizing your app performance is through Angular component reusability.

Angular Component Reusability

What exactly is Angular component reusability and how does it increase performance? 

The more Angular code you hand write, the greater the likelihood for errors. However, with reusable components you reduce the bugs that can muck up your project. Component reusability in Angular becomes a great way for increasing performance across your entire app, reflecting on several key pillars:

• Efficiency: Achieved through the reuse of markups so any change in the future is faster and simpler to make across all components at once.
• Consistency: Whenever you want to modify your components, the change is made everywhere and there is a smaller chance for errors.
• Testability: Your code becomes easier to unit test.
• Shared business logic: You can more easily understand what’s happening in the component code.

Types of Reusable Components

There are two types of reusable components: container components and presentation components. Here is the difference between them:

Angular Components Reusability Tips and Best Practices 

Here are some quick steps for building reusable components in Angular:

Step 1: Avoid nesting styles when possible.

Step 2: Use variables for common items across the Angular app.

Step 3: Use UserControl to group markup and code into a reusable container, allowing the same interface and functionality to be used in several different places.

Step 4: Create style guidelines to promote code reuse.

Step 5: Don’t make every component reusable – it will result in a non-maintainable, high coupling code.