Combining preact signals and useEffect (preact + preact/compat)

[Galtozzy]

Hey there!

I’m using Preact with the preact/compat layer to make React libraries work, and I’m also using preact-signals for state. So far, it's been working really well, except I’ve run into an issue with signals + routing. (There are actually more cases that I've run into, but I wanted to ask about a specific one as I think I'll be able to apply the solution everywhere)

I'm also using wouter via wouter-preact, and I'm trying to reactively navigate based on some shared signal state.

I have a shared signals class like this:

import { signal, computed } from '@preact/signals';

class SharedSignals {
    obj1 = signal<ObjType | null>(null);
    val1 = signal<string | null>(null);

    isSet = computed(() => Boolean(this.obj1.value && this.val1.value));
}

export const shared = new SharedSignals();

Then, in a component, I want to redirect the user when shared.isSet becomes true:

import { useEffect } from 'react';
import { useLocation } from 'wouter-preact';

export function SomeComponent() {
    const [location, navigate] = useLocation();

    useEffect(() => {
        if (shared.isSet.value) {
            if (location !== "/") {
                navigate("/loc2");
            }
        }
    }, [location, navigate, shared.isSet.value]);
}

But the effect doesn't seem to run when shared.isSet changes.

Then I tried using effect and useSignalEffect from preact-signals instead of useEffect, but it doesn't seem to track the changes to location.

The solution that worked for me was converting a signal to a useState via a wrapper, but I feel like it kills the purpose of signals.

I haven't found anything on that topic in the docs, the examples on the signals are pretty basic, and there is no read on how to use it with existing React libraries that provide different useCallbacks, states, etc.

Also, I’m a backend engineer, so I might be missing something obvious on the frontend/reactivity side. I’d love some insight from those more experienced with Signals and Preact, as I do not know all the internals of the frontend frameworks.

Thanks in advance!

package versions: [email protected], @preact/[email protected]

[rschristian]

Using signal.value in a useEffect callback should work just fine, your issue is likely something else. Any chance you can make an example in our REPL?

---

Unrelated, but you probably don't need navigate into your dependency array, it's likely already stable.

[Galtozzy]

Thanks for the answers!

I can close the discussion for now, as I wasn't able to reproduce the issue in a repl so far, but I can also just keep it open in case I'm able to repro later, it's up to you 🫡

[rschristian]

No need to ever close discussions IMO, and if anything, closing them just makes them less discoverable (as they're hidden by the default filtering).

Not to say you can't, but I have absolutely no issue with keeping even answered discussions open forever.

[Galtozzy]

@rschristian Quick update - I essentially re-created things that weren't working from scratch, and it seems to be working now, so the issue was definitely on my end.

If you don't mind, I’ve been trying to wrap my head around the docs - thought I’d lay out what I understood so far and see if it sounds about right to you. It may also be useful for someone who comes across this discussion later on through Google or while browsing.

So, the first point is from my understanding, the following is essentially the same, and it depends on which way I prefer or what fits a certain use case:

// Signals inside a class
class SharedState {
    val = signal(false);
}
const sharedState = new SharedState();

// Plain signal
const valSignal = signal(false);

// Signals inside the function
function valSignalFunc() {
    const valSignalFunc = signal(false);
    
    return { valSignalFunc };
}
const fromFunc = valSignalFunc();


// Then in any component/hook I can just import created consts and use them

Meanwhile, if I expect a signal to be used inside just a single component, I should use the following:

function Component() {
    const val = useSignal(false);
    
    return (
        <div>{val}</div>;
    )
}

// Or if I need to reuse it, I could throw it into the separate function
function useReusableSignal() {
    const val = useSignal(false);
    
    return { val };
}

function Component() {
    const { val } = useReusableSignal();
    
    return (
        <div>{val}</div>;
    )
}

Also, the example with useSignal inside a function could be passed into a context provider so that I don't have to drill properties into nested components, and it should work just fine?

[rschristian]

So, the first point is from my understanding, the following is essentially the same, and it depends on which way I prefer or what fits a certain use case:

Pretty much, yup. Signals are just reactive primitives essentially, what patterns you use to manage your data are up to you in the same way as if you were creating plain JS objects.

Also, the example with useSignal inside a function could be passed into a context provider so that I don't have to drill properties into nested components, and it should work just fine?

Yep! But you can do something even cooler with your SharedState instance and pass it as the context value.

With normal (p)react state, if you were to create an object as the context value, any change to that object would mean a rerendering of all components subscribed to the context, regardless of which properties they cared about (imagine { foo: 1, bar: 2 }; if a component only needs to check bar, foo changing ideally shouldn't rerender). With signals though, the context object will be completely stable because the reactive bits are the signals inside of the object; you can have a larger "AppState" class that manages a bunch of signals and doesn't cause any render or perf problems as components can subscribe to specific signals within that class instance. With hooks, you'd generally need to break that up into a few different contexts to avoid that issue.

[Galtozzy]

Super helpful, thanks a ton for the breakdown!