How to use subscribe like useCallback ?

[StringKe]

I'm trying to use createSignal as an EventEmitter and listen to it in a React component.

But it seems that I can only use <Subscribe /> this way, how to use it by Hook way?

[voliva]

Hey @StringKe

For your specific question, the observable returned from createSignal is just a plain rxjs Observable. React-rxjs doesn't currently have any function to directly subscribe to an observable because it doesn't directly help with managing state. But you can use to any observable in your component with just a useEffect:

const [singal$, emitSignal] = createSignal();

function MyComponent() {
  useEffect(() => {
    // Subscribe to the signal
    const sub = signal.subscribe((event) => {...});
    // Unsubscribe on cleanup
    return () => sub.unsubscribe();
  }, []);

  // ...
}

However, I'd like to know a bit more about the specific use case so I can help you better. If it does have to do with state, maybe bind could help, even if on the first look it seems it wouldn't.

But also, most of the time where you have a signal that doesn't have a dependency on a state, it's to trigger side effects. On that case, <Subscribe> can help with that:

const [singal$, emitSignal] = createSignal();

const effect$ = signal$.pipe(
  switchMap(() => { ... call service / etc })
)

function MyComponent() {
  return <Subscribe source$={effect$}>
    {...}
  </Subscribe>
}

You can also combine different effects by joining them with combining operators (e.g. merge). If you place your <Subscribe> boundaries carefully, you can make those effects activate and deactivate when needed.