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

khangtrannn

Khang Tran โšก๏ธ

Posted on April 29, 2024

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

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

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
khangtrannn
Khang Tran โšก๏ธ

Posted on April 29, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About