DEV Community

Cover image for ๐Ÿ…ฐ๏ธ๐Ÿš€ ๐—”๐—ป๐—ด๐˜‚๐—น๐—ฎ๐—ฟ ๐˜ƒ๐Ÿญ๐Ÿด ๐—›๐˜†๐—ฏ๐—ฟ๐—ถ๐—ฑ ๐—–๐—ต๐—ฎ๐—ป๐—ด๐—ฒ ๐——๐—ฒ๐˜๐—ฒ๐—ฐ๐˜๐—ถ๐—ผ๐—ป ๐— ๐—ผ๐—ฑ๐—ฒ
Khang Tran โšก๏ธ
Khang Tran โšก๏ธ

Posted on

1 1 1 1 1

๐Ÿ…ฐ๏ธ๐Ÿš€ ๐—”๐—ป๐—ด๐˜‚๐—น๐—ฎ๐—ฟ ๐˜ƒ๐Ÿญ๐Ÿด ๐—›๐˜†๐—ฏ๐—ฟ๐—ถ๐—ฑ ๐—–๐—ต๐—ฎ๐—ป๐—ด๐—ฒ ๐——๐—ฒ๐˜๐—ฒ๐—ฐ๐˜๐—ถ๐—ผ๐—ป ๐— ๐—ผ๐—ฑ๐—ฒ

From version 18, Angular will adopt Hybrid change detection scheduling by default, leading to DX improvements.

What is exactly the Hybrid Mode?

โ€ข When Angular receives a clear indication that templates need to be refreshed and change detection should run again, this should not be ignored, ๐˜ณ๐˜ฆ๐˜จ๐˜ข๐˜ณ๐˜ฅ๐˜ญ๐˜ฆ๐˜ด๐˜ด ๐˜ฐ๐˜ง ๐˜ธ๐˜ฉ๐˜ข๐˜ต ๐˜ก๐˜ฐ๐˜ฏ๐˜ฆ ๐˜ช๐˜ต ๐˜ฉ๐˜ข๐˜ฑ๐˜ฑ๐˜ฆ๐˜ฏ๐˜ฆ๐˜ฅ ๐˜ช๐˜ฏ.
โ€ข It means now Angular will ensure change detection does run, even when the state update originates ๐˜ง๐˜ณ๐˜ฐ๐˜ฎ ๐˜ฐ๐˜ถ๐˜ต๐˜ด๐˜ช๐˜ฅ๐˜ฆ ๐˜ต๐˜ฉ๐˜ฆ ๐˜ป๐˜ฐ๐˜ฏ๐˜ฆ.
โ€ข It leads to DX improvements since we no longer need to write code that utilizes Angular Zone on-demand, jumping in and out of the Angular Zone using ngZone.runOutSideAngular(() => ...)/ ngZone.run(() => ...), respectively.

Angular APIs to schedule change detection

โ€ข calling ChangeDetectorRef.markForCheck
โ€ข calling ComponentRef.setInput
โ€ข updating a signal that is read in a template
โ€ข when bound host or template listeners are triggered
โ€ข attaching a view that is marked dirty
โ€ข removing a view
โ€ข registering a render hook (templates are only refreshed if render hooks do one of the above)

Back to top example

Angular v18 Hybrid change detection mode

For more information, highly recommend the following article by Matthieu Riegler:
https://riegler.fr/blog/2024-04-17-zoneless-with-zoneless-hybrid

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Sentry image

See why 4M developers consider Sentry, โ€œnot bad.โ€

Fixing code doesnโ€™t have to be the worst part of your day. Learn how Sentry can help.

Learn more

๐Ÿ‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Communityโ€”every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple โ€œthank youโ€ goes a long wayโ€”express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay