Understanding Reactive Context in Angular(v21)

Source: Dev.to

Reactive Context in Angular Signals

In the Angular Signal system, a reactive context is a special environment where Angular’s dependency‑tracking engine is active. It is the invisible bubble that allows signals to know who is watching them.

• When you read a signal inside a reactive context, you are automatically subscribed to it.
• When you read a signal outside a reactive context, it behaves like a normal function call with no future updates.

Where Reactive Contexts Are Created

Correct Usage of Signals Inside Effects

import { effect } from '@angular/core';

constructor() {
  effect(() => {
    const x = mySignal(); // ✅ This is fine
  });
}

Practices to Avoid

Side‑effects and Signal Mutations Inside Reactive Contexts

// ❌ Bad: Creating or updating signals inside a reactive context
readonly x = signal(0);
readonly y = signal(0);

readonly c = computed(() => {
  const total = this.x() + this.y();
  return { sum: signal(total) }; // ❌ BAD practice
});

readonly x = signal(0);

readonly c = computed(() => {
  this.x.update(v => v + 1); // ❌ BAD practice
});

Other Prohibited Actions

• Calling APIs that could update signals.
• Directly manipulating the DOM.
• Using conditional effects that create new effects or signals inside an existing effect.

// ❌ Bad: Creating an effect inside another effect
effect(() => {
  if (this.x() > 10) {
    effect(() => console.log(this.x())); // ❌ BAD practice
  }
});

Batching (Change Detection Without Zones)

Angular groups multiple signal changes together and processes them in a single batch. This improves performance by reducing unnecessary re‑execution of effects and recomputations.

• Angular runs your code synchronously, tracks all modified signals, and after the task completes schedules a check to decide which effects to run.
• Modifying a signal inside an effect is considered “too late” and can lead to cyclic dependencies or infinite loops.

Guidelines for Using Effects

• Purpose: Effects should be used for side‑effects that do not affect other signals, such as logging, rendering, or updating local storage.
• Avoid: Triggering business logic that may cause signals to change, because you cannot guarantee which services or APIs might mutate signals.
• Rendering: Every Angular template is essentially run like an effect. When signals change, the template is re‑evaluated automatically.

Recommended Effect Patterns

import { effect } from '@angular/core';

// Logging example
effect(() => {
  console.log('Current value of x:', this.x());
});

// Updating local storage
effect(() => {
  localStorage.setItem('x', JSON.stringify(this.x()));
});

References

• Angular Documentation
• YouTube: Kobi Hari (Angular Signals overview)