{"id":1702,"date":"2023-10-31T05:00:00","date_gmt":"2023-10-31T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1702"},"modified":"2023-10-30T15:08:33","modified_gmt":"2023-10-30T22:08:33","slug":"async-pipe-signals-and-change-detection","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/async-pipe-signals-and-change-detection\/","title":{"rendered":"Async pipe, Signals, and Change Detection"},"content":{"rendered":"\n

Yesterday, we covered what markForCheck()<\/a> can do in terms of change detection and why it could be needed at times.<\/p>\n\n\n\n

Regarding best practices, I often mention using the async pipe<\/a> or Signals<\/a> to improve change detection and performance in our apps. Why is that? That’s because both the async<\/code> pipe and Signals have some extra code to help Angular detect changes.<\/p>\n\n\n\n

Here’s what we can find in the source code of the async<\/code> pipe<\/a>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The last line of code indicates that whenever an async pipe receives a new value, it marks the corresponding view for check, triggering the need for change detection. That’s the reason why the async<\/code> pipe works well even when used in an OnPush<\/code> component: Its internals override the behavior of whatever change detection strategy we use.<\/p>\n\n\n\n

Signals do something similar<\/a> by marking their consumers (or “subscribers,” in a sense) as dirty when the Signal value changes:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

As a result, and back to the point I was making yesterday, Instead of trying to use markForCheck() directly in our code, we should rely on the tools designed to do it automatically and in an optimized fashion for us. <\/p>\n\n\n\n

Conclusion<\/strong>: Always use the async<\/code> pipe with RxJs (you can always do so<\/a>) or use Signals for an even better experience.<\/p>\n","protected":false},"excerpt":{"rendered":"

Yesterday, we covered what markForCheck() can do in terms of change detection and why it could be needed at times. Regarding best practices, I often mention using the async pipe or Signals to improve change detection and performance in our apps. Why is that? That’s because both the async pipe and Signals have some extra […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,21,14,29],"tags":[],"class_list":["post-1702","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture","category-pipes","category-signals"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1702"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1702\/revisions"}],"predecessor-version":[{"id":1706,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1702\/revisions\/1706"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}