Skip to content


Created by Matthieu Riegler Enea Jahollari

explicitEffect is a helper function that allows you to create an effect that only depends on the provided signals in the deps array. It will run the effect function only when the signals in the deps array change.

Think about this pattern:

import { untracked } from '@angular/core';
effect(() => {
// read the signals here
const count = this.count();
const state = this.state();
// run the side effect as untracked to prevent any unnecessary signal reads or writes
untracked(() => {
log.push(`count updated ${count}, ${state}`);

This pattern is very common in Angular apps, and it’s used to prevent unnecessary signal reads or writes when the effect function is called.

explicitEffect is a helper function that does exactly this, but in a more explicit way.

explicitEffect([this.count, this.state], ([count, state]) => {
log.push(`count updated ${count}, ${state}`);
import { explicitEffect } from 'ngxtension/explicit-effect';


explicitEffect accepts an array of signals and a function that will be called when the signals change. The deps array accepts:

  • Signals (also computed signals)
  • Writable signals
  • Functions that have signal reads as dependencies (ex: () => this.count())
const count = signal(0);
const state = signal('idle');
const doubleCount = computed(() => count() * 2);
const result = () => count() + doubleCount();
[count, state, doubleCount, result],
([count, state, doubleCount, result]) => {
console.log(`count updated ${count}, ${state}, ${doubleCount}, ${result}`);


An optional second argument can be provided to explicitEffect that will be called when the effect is cleaned up.

const count = signal(0);
explicitEffect([this.count], ([count], cleanup) => {
console.log(`count updated ${count}`);
cleanup(() => console.log('cleanup'));
// count updated 0
// count.set(1);
// cleanup
// count updated 1