Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
An Angular effect() runs at least once, tracks the signals it reads, and reruns when any of those signals changes. Use it to synchronize signal state with an imperative API—such as browser storage or a chart library—not to calculate one piece of application state from another. For derived values, Angular recommends computed() or, when the derived value must also be manually set, linkedSignal().
How Angular effects track signal changes
Angular determines an effect’s dependencies from the signals read while that effect executes. The first execution establishes its dependencies; later executions update them to reflect the signals read most recently. A signal read only on a particular branch is therefore tracked only while that branch is executed.
This dynamic tracking means the effect responds to the state its current execution actually uses. It is not a fixed list of dependencies that you declare separately. See Angular’s effect guide for the dependency-tracking model.
When to use an effect—and when not to
Use effects at imperative boundaries
An effect is appropriate when changing signal state must trigger work in a system that does not use Angular signals. Angular’s examples include logging, synchronizing state with storage, custom DOM behavior, and rendering through a third-party library. In these cases, the effect connects reactive application state to an external side effect.
#1 Best Overall
Use a derived-state API for values
If the result is simply a value calculated from other signal state, use computed(). If that derived state also needs to be set manually, consider linkedSignal(). Copying a signal’s value into another signal from an effect is usually the wrong model: Angular warns that propagating state this way can cause expression-changed errors, circular updates, and unnecessary change-detection work. Its guidance is that “Effects should be the last API you reach for” and to “Avoid using effects for propagation of state changes.”
Choose the API that fits the work
| Need | Use | Why |
|---|---|---|
| Calculate a value from signals | computed() |
Models derived state directly. |
| Calculate a value that must also be manually writable | linkedSignal() |
Supports derived state that can be set manually. |
| Synchronize signal state with an imperative system | effect() |
Runs side-effecting work when tracked signals change. |
| Integrate with the DOM after Angular renders | afterRenderEffect |
Runs after Angular commits DOM changes; it runs only on the client. |
Angular’s signals essentials also describe how signals fit into reactive application state.
Effect timing, injection context, and ownership
Timing depends on where an effect is created. A component effect participates in Angular synchronization, while a root effect runs as a microtask and is not connected to the component tree or change detection. The effect API reference describes these distinctions.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →By default, creating an effect requires an injection context. If it must be created elsewhere, provide an injector. Effects created in a component or directive context are automatically destroyed with that owner. An effect returns an EffectRef; call its destroy() method for manual disposal. If you enable manual cleanup, you are responsible for eventually destroying the effect.
Rank #3
Cancel work before an effect runs again
When an effect starts work that can outlive its current execution—such as a timer or request—register an onCleanup callback. Angular calls the callback before the effect runs again or when the effect is destroyed, giving you a place to cancel or release the previous operation.
This cleanup is important when signal changes can arrive before prior work finishes: without cancellation, an outdated timer or request may continue after the effect has moved on to newer state.
Use after-render effects for post-render DOM integration
When an integration needs to inspect or update the DOM after Angular has committed a render, consider afterRenderEffect rather than an ordinary effect. Angular’s guide demonstrates using it to create a chart after the initial render and update that chart as state changes.
Choose its phases carefully. Angular cautions that the default mixed read/write phase can cause additional reflows. Direct DOM and layout work also needs care because a component is not guaranteed to be hydrated before the callback runs. The API runs only on the client, so it is not a substitute for server-side rendering work. For observing changes in browser layout, DOM structure, or visibility, a browser API such as ResizeObserver, MutationObserver, or IntersectionObserver may be a better fit.
A practical decision path
- Ask whether you need a value or an action. For a value derived from signals, choose
computed(); for a derived value that must also be set manually, considerlinkedSignal(). - Use
effect()when a signal change must trigger an imperative side effect. Examples include logging or synchronizing with storage or a third-party library. - Decide whether the work depends on the rendered DOM. For post-render DOM integration, consider
afterRenderEffectand choose its phases deliberately. - Plan cleanup for work that can continue. Register
onCleanupto cancel the prior operation before the next run or destruction.
For a guided introduction to the underlying signal concepts, Angular offers the interactive Learn Angular signals tutorial.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
