What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
An Angular effect() runs at least once, tracks the signals it reads, and runs again when a tracked signal changes. Use it mainly to synchronize Angular state with an imperative system—such as browser storage, logging, or a chart library—not to calculate a value that belongs in computed() or linkedSignal().
How Angular effects track signal changes
When an effect executes, Angular records the signals read during that execution as its dependencies. If any of those signals changes, Angular schedules the effect to run again. The effect’s dependency set is dynamic: each run replaces the previous set with the signals read in the latest run. A signal read only in a branch that is not taken during the current execution is not a dependency for that run.
As an Amazon Associate I earn from qualifying purchases.
For example, an effect that reads selectedChart() will rerun when that signal changes. If it conditionally reads chartOptions(), that signal is tracked only while the relevant branch executes. This makes dependencies follow the effect’s actual work rather than a fixed list. See Angular’s effect guide.
Free tools Windows power users keep installed
One-click scans. No signup required.
Choose an effect only for imperative side effects
Angular recommends effects primarily at the boundary between signals and APIs that do not themselves use signals. Suitable tasks include logging, synchronizing state to browser storage, custom DOM behavior, and rendering through a third-party library. Angular’s guidance is direct: “Effects should be the last API you reach for.”
#1 Best Overall
Use computed() for derived values
If the result is simply a value calculated from other signals, use computed(). It expresses the dependency as derived state rather than triggering an imperative operation. For example, a full name derived from first- and last-name signals is a computed value, not a reason to copy values in an effect.
Use linkedSignal() when derived state must remain writable
If a value is derived from other state but also needs to be set manually, consider linkedSignal(). It is a better fit than an effect that copies one signal into another while trying to preserve writable state.
Avoid effects that propagate state
Angular warns against using effects to propagate changes between signals. Copying state this way can cause expression-changed errors, circular updates, and unnecessary change-detection work. Model the relationship with computed() or linkedSignal() instead. See Angular’s signals essentials.
Understand when an effect runs
Scheduling depends on where the effect is created. A component effect participates in Angular synchronization and can interact with component state, including input signals. A root effect runs as a microtask and is not tied to the component tree or change detection. These distinctions matter when the work depends on rendering or component lifecycle; the effect API reference documents both kinds.
Rank #3
By default, creating an effect requires an Angular injection context. If you create it somewhere without that context, provide an injector through the effect options. Component- and directive-associated effects are automatically destroyed with their owning context. An effect returns an EffectRef, whose destroy() method allows manual disposal; when using manual cleanup, ensure the effect is eventually destroyed.
Cancel work from an earlier run
An effect may start work that should not continue after its inputs change or its owner is destroyed. Register an onCleanup callback inside the effect to cancel that work before the next execution or on destruction. This is useful for timers, requests, and other ongoing operations.
effect((onCleanup) => {
const query = searchTerm();
const timer = setTimeout(() => fetchResults(query), 300);
onCleanup(() => clearTimeout(timer));
});The example cancels the previous timer when the effect reruns, preventing an outdated scheduled action from lingering. Adapt cleanup to the operation being started, such as aborting a request when the API supports cancellation.
Use afterRenderEffect for post-render DOM work
If an integration needs to inspect or update the DOM after Angular commits changes, 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 signal state changes. It runs only on the client, and Angular does not guarantee the component has been hydrated before the callback runs, so direct DOM and layout work needs care.
Choose render phases deliberately. The guide cautions that the default mixed read-and-write phase can cause additional reflows. For behavior better represented by browser lifecycle notifications, an observer such as ResizeObserver, MutationObserver, or IntersectionObserver may be a more suitable integration point. See Angular’s effect guide.
A quick decision path
- Need a value derived from signals? Use
computed(). - Need derived state that can also be set manually? Consider
linkedSignal(). - Need to synchronize signals with an imperative API? Use
effect(), and clean up work from prior runs. - Must access the DOM after Angular renders? Consider
afterRenderEffector an appropriate browser observer.
For an interactive introduction to the underlying signal concepts, Angular provides the 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.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →
