{"id":26619,"date":"2024-09-09T03:06:55","date_gmt":"2024-09-09T01:06:55","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/"},"modified":"2025-06-04T17:03:13","modified_gmt":"2025-06-04T15:03:13","slug":"when-not-to-use-effects-in-angular-and-what-to-do-instead","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/","title":{"rendered":"When (Not) to use Effects in Angular — and what to do instead"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 5 of 9 in the series “Signals”<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t

\n\t\t\t
    \n\t\t\t\t\t\t\t\t\t
  1. Signals in Angular: Building Blocks<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  2. Component Communication with Signals: Inputs, Two-Way Bindings, and Content\/ View Queries<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  3. Successful with Signals in Angular – 3 Effective Rules for Your Architecture<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  4. Skillfully Using Signals in Angular – Selected Hints for Professional Use<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  5. When (Not) to use Effects in Angular — and what to do instead<\/span><\/li>\n\t\t\t\t\t\t\t\t\t
  6. Asynchronous Data Flow with Angular’s new Resource API<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  7. Streaming Resources in Angular – Details and Semantics<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  8. Streaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  9. Angular’s new httpResource<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n

    As the Angular docs mention that Effects are rarely needed in most applications, there is some confusion about how and when to use them. With this article, I try to shed some light on this topic in an objective and emotionless way.<\/p>\n

    The Main Use Case for Effects<\/h2>\n

    Effects are primarily for rendering stuff you cannot render using data binding. <\/p>\n

    Here are some examples you can also find in the docs<\/a>:<\/p>\n

    1) Logging
    \n2) Painting on a Canvas
    \n3) Custom DOM behavior<\/p>\n

    As data binding is the preferred way to display data to the user, it's obvious why the docs tell us effects are only sometimes needed.<\/p>\n

    A good example for 2) is Chau Tran<\/a>'s fantastic library Angular Three<\/a>, bridging Angular and Three.js. <\/p>\n

    3) is about DOM behavior that cannot be expressed via the template syntax. An example is showing a SnackBar<\/code> with an imperative API, e.g., the one in Angular Material.<\/p>\n

    Keep Auto-Tracking in Mind<\/h2>\n

    Please remember that Angular uses implicit tracking (auto-tracking) for computed<\/code> and effects<\/code>. In the following example, the effect will track the error<\/code> Signal even though it's not directly used in the effect function but inside the called logError<\/code> method.<\/p>\n

    effect(() => {\n  this.logError();\n});\n:\nlogError(): void {\n  const error = this.error();\n  if (error) {\n    console.error(error);\n  }\n}<\/code><\/pre>\n
    This also emphasizes that Angular's current Effects implementation is primarily intended for rendering. Signals touched during rendering are tracked. If you change them, rendering kicks in again. Angular's Alex Rickabaugh<\/a> discussed this design decision in this GitHub Issue<\/a>.<\/p>\n
    When NOT to use Effects?<\/h2>\n
    The docs<\/a> also explicitly mention to NOT use effects for propagating state. There are several possible issues, such as circular updates. I would add: The auto-tracking behavior can quickly lead to code that becomes hard to maintain. This is also discussed the mentioned GitHub issue<\/a>. <\/p>\n
    Furthermore, Effects make your code more imperative and less declarative. The latter is in the sense of reactive programming. If you want to know how to make your code more declarative, my GDE fellow Mike F. Pearson<\/a>, who is the author of StateAdapt<\/a>, has you covered.<\/p>\n
    Another thing we need to keep in mind is that Signals are glitch-free: If you change a Signal several times in a row (within a stack frame), only the last change is seen. This fits for rendering but also shows that Signals are not suited for representing events. <\/p>\n
    Effects for Reactive Helpers<\/h2>\n
    While not mentioned in the docs, Effects are also used behind the covers to build reactive helpers. An example is toObservable<\/code> in Angular, rxMethod<\/code> in the NGRX Signal Store, and the many helpers in Chau Tran<\/a>'s and Enea Jahollari<\/a>'s library ngxtension<\/a>.<\/p>\n
    I will come back to this topic at the end of this short article.<\/p>\n
    Reacting on Signal Changes<\/h2>\n
    So far, we have discussed when to use effects and when they are to be avoided. However, this leaves a question that usually arises quickly: How to react to changing Signals?<\/p>\n
    There are several answers:<\/p>\n
    1) Derive your state via computed or the Resource API
    \n2) Use the event behind the Signal change
    \n3) Use RxJS
    \n4) Use a reactive helper<\/p>\n
    Using computed is the way to go when you can derive the needed value from existing Signals synchronously<\/em>. For an asynchronous derivation, Angular provides the Resource API<\/a>.<\/p>\n
    In the case of 2), you don't track the Signal change but react to the Event behind it:<\/p>\n
    <\/p>\n
    Using the event behind the change mitigates issues mentioned above, such as issues with auto-tracking or circular updates.<\/p>\n
    With 3), I mean using RxJs instead or in addition to Signals. In the latter case, you convert between the two worlds with Angular's RxJS interop, providing functions like toObservable<\/code> and toSignal<\/code>. RxJS allows you to have a reactive flow end-to-end, e.g., from the user's interaction to the output. Please also keep in mind that RxJS' flattening operators, such as switchMap,<\/code> provide guarantees in terms of overlapping requests and hence help to avoid race conditions. My GDE fellow Jan-Niklas Wortmann<\/a> discussed this topic during his Session about reactivity in Angular Applications<\/a> at ng-conf 2024.<\/p>\n
    Examples of reactive helpers, as mentioned in 4), are rxMethod<\/code> in NGRX Signal Store<\/a> or deriveAsync<\/code> in ngxtension<\/a>. A method set up with rxMethod<\/code> can take a Signal and connect it to an RxJS-based pipe:<\/p>\n
    this.store.rxLoad(this.id);<\/code><\/pre>\n
    Here is the simple Signal Store implementing rxLoad<\/code>:<\/p>\n
    export const DessertDetailStore = signalStore(\n    { providedIn: 'root' },\n    withState({\n        dessert: initDessert,\n        loading: false\n    }),\n    withMethods((\n        store,\n        dessertService = inject(DessertService)\n    ) => ({\n        rxLoad: rxMethod<number>(pipe(\n            tap(() => patchState(store, { loading: true })),\n            switchMap((id) => dessertService.findById(id)),\n            tap((dessert) => patchState(store, { dessert, loading: false })),\n        )),\n    }))\n);<\/code><\/pre>\n
    For the sake of simplicity, this example does not contain error handling.<\/p>\n
    More on this: Angular Architecture Workshop (online, interactive, advanced)<\/h2>\n
    Become an expert for enterprise-scale and maintainable Angular applications with our Angular Architecture workshop!<\/a><\/p>\n
    \"\"<\/p>\n
    All Details (English Workshop)<\/a> | All Details (German Workshop)<\/a>
    \n<\/p>\n
    For and Against explicitEffect<\/h2>\n
    Another often discussed helper that is also discussed by Alex Rickabough in the mentioned GitHub Issue<\/a> is explicitEffect<\/code>. The library ngxtension<\/a> provides an implementation. Basically, it's a combination of effect<\/code> and untracked<\/code> to restrict tracking to several explicitly mentioned Signals:<\/p>\n
    explicitEffect(this.id, (id) => {\n  this.store.load(id);\n});<\/code><\/pre>\n
    In this case, only the id<\/code> Signal is tracked. An explicit Effect is a simple way to mitigate the drawbacks of auto-tracking when using effects for something beyond rendering as discussed above. However, it does not compensate for other already discussed issues that come with using effects for such tasks. For instance, you can  end up with cyclic updates and code that is hard to reason about. Also, code like this is imperative and, hence, not in the sense of the reactive paradigm, where we try to have declarative code and a reactive chain bridging inputs and outputs.<\/p>\n
    If you favor the reactive paradigm, you will avoid explicitEffect<\/code>. Instead, you will very likely go with RxJS or helpers like rxMethod<\/code>, the many declarative ones in ngxtension<\/a>, or Angular's Resource API<\/a>. This is also the recommented approach. If this is not the case for you, you and your teammates should be aware of the consequences that come with using this kind of effect.<\/p>\n
    Summary<\/h2>\n
    Effects are primarily for rending stuff that cannot be rendered via data binding. Examples are logging, painting on a canvas, or custom DOM behavior, such as displaying a SnackBar<\/code> with an imperative API like the one in Angular Material. To react to a Signal Change, you should favor computed<\/code> if the needed value can be synchronously derived or the Resource API for asynchronous derivations. Also, use the events behind Signal changes, RxJS, or or reactive helpers to establish a reactive end-to-end chain.<\/p>\n","protected":false},"excerpt":{"rendered":"
    This is post 5 of 9 in the series “Signals” Signals in Angular: Building Blocks Component Communication with Signals: Inputs, Two-Way Bindings, and Content\/ View Queries Successful with Signals in Angular – 3 Effective Rules for Your Architecture Skillfully Using Signals in Angular – Selected Hints for Professional Use When (Not) to use Effects in […]<\/p>\n","protected":false},"author":25,"featured_media":26615,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-26619","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-signals"],"acf":[],"yoast_head":"\nWhen (Not) to use Effects in Angular - and what to do instead - ANGULARarchitects<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"When (Not) to use Effects in Angular - and what to do instead - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"This is post 5 of 9 in the series “Signals” Signals in Angular: Building Blocks Component Communication with Signals: Inputs, Two-Way Bindings, and Content\/ View Queries Successful with Signals in Angular – 3 Effective Rules for Your Architecture Skillfully Using Signals in Angular – Selected Hints for Professional Use When (Not) to use Effects in […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-09T01:06:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-04T15:03:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/09\/sujet-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manfred Steyer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/09\/sujet-1.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/\"},\"author\":{\"name\":\"Manfred Steyer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a\"},\"headline\":\"When (Not) to use Effects in Angular — and what to do instead\",\"datePublished\":\"2024-09-09T01:06:55+00:00\",\"dateModified\":\"2025-06-04T15:03:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/\"},\"wordCount\":1026,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/09\/shutterstock_2107953416.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/\",\"name\":\"When (Not) to use Effects in Angular - and what to do instead - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/09\/shutterstock_2107953416.jpg\",\"datePublished\":\"2024-09-09T01:06:55+00:00\",\"dateModified\":\"2025-06-04T15:03:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/09\/shutterstock_2107953416.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/09\/shutterstock_2107953416.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"When (Not) to use Effects in Angular — and what to do instead\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a\",\"name\":\"Manfred Steyer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"When (Not) to use Effects in Angular - and what to do instead - ANGULARarchitects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/","og_locale":"en_US","og_type":"article","og_title":"When (Not) to use Effects in Angular - and what to do instead - ANGULARarchitects","og_description":"This is post 5 of 9 in the series “Signals” Signals in Angular: Building Blocks Component Communication with Signals: Inputs, Two-Way Bindings, and Content\/ View Queries Successful with Signals in Angular – 3 Effective Rules for Your Architecture Skillfully Using Signals in Angular – Selected Hints for Professional Use When (Not) to use Effects in […]","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/","og_site_name":"ANGULARarchitects","article_published_time":"2024-09-09T01:06:55+00:00","article_modified_time":"2025-06-04T15:03:13+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/09\/sujet-1.jpg","type":"image\/jpeg"}],"author":"Manfred Steyer","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/09\/sujet-1.jpg","twitter_misc":{"Written by":"Manfred Steyer","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/"},"author":{"name":"Manfred Steyer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a"},"headline":"When (Not) to use Effects in Angular — and what to do instead","datePublished":"2024-09-09T01:06:55+00:00","dateModified":"2025-06-04T15:03:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/"},"wordCount":1026,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/09\/shutterstock_2107953416.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/","name":"When (Not) to use Effects in Angular - and what to do instead - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/09\/shutterstock_2107953416.jpg","datePublished":"2024-09-09T01:06:55+00:00","dateModified":"2025-06-04T15:03:13+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/09\/shutterstock_2107953416.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/09\/shutterstock_2107953416.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/when-not-to-use-effects-in-angular-and-what-to-do-instead\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"When (Not) to use Effects in Angular — and what to do instead"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a","name":"Manfred Steyer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g","caption":"Manfred Steyer"}}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/26619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=26619"}],"version-history":[{"count":6,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/26619\/revisions"}],"predecessor-version":[{"id":30520,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/26619\/revisions\/30520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/26615"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=26619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=26619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=26619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}