CHANGE DETECTION (a short overview)

Rendering

When you're using a web site, what you see on the screen (like buttons, images, and text) is created based on the app's internal data (like objects and arrays). This process of turning data into visual elements is called rendering.

In any application, rendering is the process of updating the screen that takes the internal state of the program and projects it into something users can see on the screen.

Role of frameworks

In web development, frameworks (like React or Angular) help manage this rendering process. They make sure that the internal data and what you see on the screen are always in sync. They do this efficiently, so you don't have to worry about it.

Frameworks take care of synchronisation between the internal state of the application and the underlying platform. But not only do they take some weight off our shoulders, they do the state tracking(checks if data is changed in the logic) and DOM updates very efficiently, thus automating the process of rendering.

This synchronisation process has different names in different frameworks. In react, it's called reconciliation, and in angular, it's called change detection.

Why it is important

• Feels fast and responsive: Users don’t want to wait for updates.

• Uses resources efficiently: It avoids wasting time and memory on unnecessary updates.

• Makes the developer’s job easier: You don’t need to manually update every piece of the screen—frameworks handle it for you!

Angular’s change detection

Angular's change detection relies on something called the digest cycle, which tracks changes in your application’s data and updates the view (what users see). Think of it as Angular asking, “Did anything change?

Flow:

1. Event Happens: You type in a form field or click a button.

2. Data Changes: The app stores your input or modifies some internal data.

3. Change Detection Kicks In: Angular runs its change detection mechanism to figure out if the app's view needs updating.

4. DOM Updates: Angular updates only the necessary parts of the DOM.

Angular uses Zone.js, a library that hooks into browser events like clicks or HTTP responses, to know when something might have changed. This means you, as a developer, don’t need to tell Angular, “Hey, something changed.” Angular just knows.

Angular Optimisation Tip:

When performance is critical, you can fine-tune change detection with OnPush. This tells Angular to skip checking a component unless its input changes, making the app faster for users.

Conclusion

Change detection is one of the most important pieces of an architecture since it’s responsible for the updates of the platform model (DOM) responsible for visible parts. It’s also the area that significantly affects an application’s performance.