DEV Community

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

Posted on

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

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

Top comments (0)