{"id":1063,"date":"2023-06-13T05:00:00","date_gmt":"2023-06-13T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1063"},"modified":"2023-06-12T15:09:20","modified_gmt":"2023-06-12T22:09:20","slug":"how-to-improve-performance-with-pure-pipes","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-improve-performance-with-pure-pipes\/","title":{"rendered":"How to improve performance with pure pipes"},"content":{"rendered":"\n

Earlier in this newsletter, we saw that calling a method in a component template is an anti-pattern<\/a>. The antidote to that anti-pattern is to use a pure pipe<\/strong>. <\/p>\n\n\n\n

By default, all pipes we use in Angular are pure. Custom pipes are also pure by default. The only way to make a pipe impure is to add the config option pure: false<\/code> to its decorator:<\/p>\n\n\n

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

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

What is a pure pipe?<\/h2>\n\n\n\n

A pure pipe is one that Angular will execute only when there is a pure change<\/strong> to its input value. It is automatically optimized for performance<\/strong> since it is executed only when needed. <\/p>\n\n\n\n

A pure change is either a change to a primitive input value (such as string<\/code>, number<\/code>, or boolean<\/code>), or a changed object reference (such as Date<\/code>, Array<\/code>, or Object<\/code>).<\/p>\n\n\n\n

In other words, if we consider the following use case:<\/p>\n\n\n

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

Here are some examples of pure and impure changes in variables:<\/p>\n\n\n

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

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

With all that information, we are now equipped to call a formatting function in a template by using a pipe (said function would be called in the transform<\/code> method of the pipe). We know that the function would run only when the input value changes (purely), which allows us to decide when we want that pipe to be executed again by making either a pure or an impure change to the input value.<\/p>\n\n\n\n

Finally, we can double-check that our pipe is working as expected using the Angular profiler<\/a> to make sure that the pipe doesn’t run more often than expected.<\/p>\n","protected":false},"excerpt":{"rendered":"

Earlier in this newsletter, we saw that calling a method in a component template is an anti-pattern. The antidote to that anti-pattern is to use a pure pipe. By default, all pipes we use in Angular are pure. Custom pipes are also pure by default. The only way to make a pipe impure is to […]<\/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,20,14],"tags":[],"class_list":["post-1063","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture","category-performance","category-pipes"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1063","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=1063"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1063\/revisions"}],"predecessor-version":[{"id":1067,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1063\/revisions\/1067"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}