Dependent signals

[kirrosh]

How can dependent signals be implemented, where changes in one signal trigger updates in another, without causing a 'Cycle detected' error as encountered in the provided code snippet?

import { signal, effect } from "@preact/signals-core";

const num = signal(0)

setInterval(() => {
    num.value += 1
}, 1000)

const evenCounter = signal(0)


effect(() => {
    if (num.value % 2) {
        evenCounter.value += 1
    }
    
})

effect(() => {
    document.getElementById("app").innerHTML = evenCounter.value
})

codesandbox

For example, such behavior could be used when a listener in one location is attached to one signal, triggering class methods that internally change another signal. So far, the only solution I have found to this problem is to move these methods out of the call stack using setTimeout(() => {}, 0).

[kirrosh]

This seems like it could be applicable in this case.

const counter = signal(0);
const effectCount = signal(0);
const fn = () => effectCount.value + 1;

effect(() => {
	console.log(counter.value);

	// Whenever this effect is triggered, run `fn` that gives new value
	effectCount.value = untracked(fn);
});

[Kanaye]

You'd normally just use computed for this.
I updated your initial codesandbox to show one way how this could be implemented: https://codesandbox.io/p/sandbox/dependent-signals-forked-nq7p7v

[kirrosh]

Yes, computed is suitable in this case. However, it appears that this option may not work in more complex situations, where there is no access to the original signal or when another signal does not directly depend on the first signal, but its change is still in the call stack of the effect.

For example, I have a boolean switch that activates or stops a timer. Depending on the timer, a necessary object is computed within which a method should be called that will change a third signal of the global state.

Originally, this logic was implemented using Observable. Most likely, the architecture can be redesigned so that the simple use of signal and computed is sufficient, but this requires more experience working with signals :)