Sign upSign InSign upSign InNavneet SinghFollowBits and Pieces--ListenShareZone.js is a crucial part of Angular that detects potential changes in an application’s state. It captures asynchronous operations such as setTimeout, network requests, and event listeners. Angular schedules change detection based on signals from Zone.js.However, there are cases where scheduled tasks or microtasks do not modify the data model, making it unnecessary to run change detection. Common examples include operations like requestAnimationFrame, setTimeout, setInterval, or task scheduling by third-party libraries. In such scenarios, it is essential to identify these unnecessary change detection calls and run code outside the Angular zone to optimize performance.💡 As an aside, if you’re taking on a big Angular project, consider implementing a component-driven approach using tools such as Bit. With Bit, you can independently develop, test, version, document and publish components, which you can then share and reuse across multiple projects.bit.devAngular DevTools can help detect unnecessary change detection calls. They often appear as consecutive bars in the profiler’s timeline, originating from setTimeout, setInterval, requestAnimationFrame, or event handlers. When there are limited calls to these APIs within your application, the excessive change detection invocations are usually caused by third-party libraries.To address this issue, Angular provides the NgZone service, allowing you to instruct Angular to avoid calling change detection for tasks scheduled by specific code. By running code outside the Angular zone, unnecessary change detection calls can be avoided.The code snippet above demonstrates how to use runOutsideAngular from the NgZone service. By calling setInterval within runOutsideAngular, Angular is instructed to execute pollForUpdates outside the Angular Zone and skip running change detection afterward.Third-party libraries often trigger unnecessary change detection cycles because they were not authored with Zone.js in mind. To avoid these additional cycles, it is recommended to execute library APIs outside the Angular zone.In the example above, executing Plotly.newPlot('chart', data) within runOutsideAngular ensures that Angular does not run change detection after tasks scheduled by the initialization logic. For instance, if Plotly.newPlot adds event listeners to a DOM element, Angular will not perform change detection after the execution of their handlers.By utilizing the runOutsideAngular method from NgZone, you can effectively resolve zone pollution and optimize the performance of your Angular application. It allows you to avoid unnecessary change detection calls caused by external libraries and ensure that change detection is only triggered when necessary.Bit is an open-source toolchain for the development of composable software.With Bit, you can develop any piece of software — a modern web app, a UI component, a backend service or a CLI script — as an independent, reusable and composable unit of software. Share any component across your applications to make it easier to collaborate and faster to build.Join the 100,000+ developers building composable software together.Get started with these tutorials:bit.devblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.io----Bits and PiecesNavneet Singh--Osusara KammalawattainBits and Pieces--1Matteo PampanainBits and Pieces--16Navneet Singh--1Jose Matos--Nooruddin saheb--1Chandra Bhushan S--Itzhak--MUKHRIDDIN KHODIEV--6Ayyash Ayyash--1HelpStatusWritersBlogCareersPrivacyTermsAboutText to speechTeams