useSignalEffect not as precise as useEffect with signals properties

[darioRandazzoAccedo]

Hello,
I am trying to run side effects on a preact component when a specific property of a object stored in a signal change.

Let me explan this with an example from a preact component:

import { useEffect } from 'preact/hooks';
import { useSignal, useSignalEffect } from '@preact/signals';
...
  const myStateMachine = useSignal({ isWalking: false, isEating: false });
  ...
  useSignalEffect(() => {
    console.log(`USE = isWalking changed ${myStateMachine.value.isWalking}`);
  });
  useSignalEffect(() => {
    console.log(`USE = isEating changed ${myStateMachine.value.isEating}`);
  });

  useEffect(() => {
    console.log(`UE = isEating changed ${myStateMachine.value.isEating}`);
  }, [myStateMachine.value.isEating]);

  useEffect(() => {
    console.log(`UE = isWalking changed ${myStateMachine.value.isWalking}`);
  }, [myStateMachine.value.isWalking]);

  useEffect(() => {
    setTimeout(() => {
      console.log(`gonna write whole value (change #1)`);
      myStateMachine.value = {
        ...myStateMachine.value,
        isWalking: true,
      };
    }, 2000);
  }, []);

  useEffect(() => {
    setTimeout(() => {
      console.log(`gonna write only isWalking (change #2)`);
      myStateMachine.value.isWalking = false;
    }, 5000);
  }, []);

Doing so, I noticed that useEffect hook works always as expected and with specific precision, while useSignalEffect does not work as "I would expect".
This is the log I got:

USE = isWalking changed false
USE = isEating changed false
UE = isEating changed false
UE = isWalking changed false
gonna write whole value (change #1)
USE = isWalking changed true
USE = isEating changed false
UE = isWalking changed true
gonna write only isWalking (change #2)
UE = isWalking changed false

Commenting these results:

1. when applying the change 1 (writing whole value), both useSignalEffect runs, despite the real change happens only in a single property (isWalking), on the other hand the useEffects are triggered according to their dependencies (only the ue with this dependecy runs [myStateMachine.value.isWalking] )
2. when applying the change 2 (writing specifically isWalking), NONE of the useSignalEffect runs, and the useEffect still work as expected (only the ue with this dependecy runs [myStateMachine.value.isWalking] )

I am asking this question in the process of understanding how and if I can mix signals with standard hooks.
Is there some signals api that address my specific need?
Or maybe I am just missing something.

Thanks

[JoviDeCroock]

It sounds like you are looking for something like deepsignal by default signals are shallow reactivity which is the easiest thing to reason about. You change the whole object so it will trigger anything listening for said object. If say, every property on said state machine was a signal and you'd do stateMachine.foo.value then it would run granularly.

These things can be found described on our pages as well https://preactjs.com/blog/introducing-signals/

[darioRandazzoAccedo]

Ok, thanks. I can see the reasons of the shallow reactivity.

I just wonder: should I expect some problems at using a signal property as dependency of a regular useEffect (or useMemo or useCallback, or whatever standard hook)? I cannot find this information in your docs.

[JoviDeCroock]

Not as long as you unwrap it, an unwrapped signal (access .value) in i.e. a dependency array will register value changes as a rerender which in turn hooks into how the hooks implementation works. A rerender will make dependency arrays re-evaluate the values within and reschedule when changed.