How to implement external subscription management? Websocket, timeouts, interval, etc, missing onMount

[mxck]

Hello!

In libraries like nanostores or Svelte, there is an onMount method that makes it easy to manage subscriptions, such as for WebSocket updates or intervals. For example:

const $steps = atom(0);

onMount($steps, () => {
  // This will be called after $steps got any subscription
  const interval = setInterval(() => $steps.set(s => s + 1), 1000);
  return () => clearInterval(interval);
});

I’m trying to achieve something similar with preact-signals. I’ve seen discussions in the issues mentioning that signals have internal S and U fields for subscribing/unsubscribing, and it’s possible to track subscription counts manually. However, I’d prefer not to patch signals manually or rely on internal fields.

What is the recommended way to handle subscriptions like this in preact-signals? Is there a built-in pattern or best practice to achieve this?

Thank you!

EDIT 1:
For example, in the signals proposal, there are the following:
https://github.com/tc39/proposal-signals

Signal.subtle.watched
Signal.subtle.unwatched

[JoviDeCroock]

Making a subscription is basically a side-effect so using something useSignalEffect in signals or useEffect(()=>,[]) in hooks would do that.

The effect will run onMount and based on dependencies re-run again, in your case you don't want it to rerun so signals would be accessed with untracked or peek.

only mounting

useSignalEffect(() => {
  const unsubsribe = subscribeToSomeWebsocket() // will be called when the component mounts
  return unsubscribe // will be called when the component unmounts
})

with updates

useSignalEffect(() => {
  const unsubsribe = subscribeToSomeWebsocket(id.value) // will be called when the component mounts and  id signal updates
  return unsubscribe // will be called when the component unmounts and id signal updates
})

[mxck]

Yes, but in your example, the subscription and unsubscription happen at the React/Preact level.
I’m building a library that uses signals, but I’m not using React/Preact. :)

[JoviDeCroock]

Your example has an onMount though which hints at a component lifecycle which is the example I have given. Outside of Preact there's not really a difference between normal JS and any other framework. so using effect rather than useSignaleffect

[mxck]

No, this is an example from nanostores.
onMount is specifically the mount for an atom.

EDIT 1:
Nanostores Docs

[JoviDeCroock]

Again, effect https://preactjs.com/guide/v10/signals#effectfn which is still what's explained at the root of this thread... The documentation might say that it responds to changes of signals, however to do that it has to run the code once. I do see a slight difference with the nanostores one as it's only invoked when the first subscriber enters the playing field, however that's already an RFC on signals and has no place in the Preact discussions as that is a whole other repo #428

[mxck]

Thank you for the detailed response!

Yes, my question is specifically about an effect that is triggered and cleaned up when subscriptions appear. This is very convenient.

For example, I’m designing a data layer for multiple projects, and I’d like the end user (developer) to have the signal automatically update when they subscribe and stop updates when they unsubscribe.

EDIT:
So I want it works like some magic, but I don’t want to wrap signal in wrappers or use a Proxy.